jquery-file-upload 文件上传带进度条效果(2)
js 部分
<script src="/admin/assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script> <script src="/admin/assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/admin/assets/plugins/jquery-1.10.2.min.js"></script>
<span style="font-family:monospace;font-size:14px;"> <span id="_xhe_cursor"></span>$('#file_upload').fileupload({ dataType: 'json', url:'${pageContext.request.contextPath}/excel/upload', autoUpload:false, add: function (e, data) { $('#progress').css( 'width','0%' ); $('#progress .bar').css( 'width', '0%' ); $("#uploadText").empty(); var fileType = data.files[0].name.split('.').pop(); // console.log(data); var acceptFileTypes = /xls|xlsx$/i; var size = data.files[0].size; size = (size/1024).toFixed(2);//文件大小单位kb var maxFileSize = 5*1024;//最大允许文件大小单位kb if (!acceptFileTypes.test(fileType)) { new Message({message:"不支持的文件类型,仅支持EXCEL文件"}); return ; } if(size>maxFileSize){ new Message({message:"文件大小:"+size+"KB,超过最大限制:"+maxFileSize+"KB"}); return ; } data.context = $("<button class=' ui-button ui-button-lwhite'/>").text("上传") .appendTo("#uploadText") .click(function () { data.context = $("<p/>").text("正在上传...").replaceAll($(this)); data.submit(); }); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress').css( 'width','100%' ); $('#progress .bar').css( 'width',progress + '%' ); }, fail:function (e, data) { new Message({message:"上传失败"}); }, done: function (e, data) { console.log(data.files[0]); var fileName = data.files[0].name; var size = data.files[0].size; var obj = data.result; if(obj.success == true){ $("#filePath").val(obj.result.fileId+"&"+obj.result.opLogId); data.context.text("文件上传已完成!文件名:"+fileName+" 文件大小:"+size+"kb"); }else{ alert(obj.errorMsg); } } });</span>
XHR响应为Json时IE的下载BUG
这里需要特别注意的是,由于jQuery File Upload都是采用XHR在传递数据,服务器端返回的通常是JSON格式的响应,但是IE会将这些JSON响应误认为是文件传输,然后直接弹出下载框询问是否需要下载。
解决这个问题的方法是必须将相应的Http Head从
Content-Type: application/json
更改为
Content-Type: text/
总结
以上所述是小编给大家介绍的jquery-file-upload 文件上传带进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!