前言

不得不说jQuery file upload插件文档有点杂乱,API是挺全的,但是也没有明确哪些API兼不兼容IE,再加上还不熟悉之前flash写的业务代码,头疼。

作为一个未毕业、0基础刚入门的前端切图仔,采坑是不可避免的,从小老师教导:‘’好记性不及烂笔头记‘’,那么记之以砥砺前行。

正文

采坑记录

1.jQuery File Upload的使用

Github地址:https://github.com/blueimp/jQuery-File-Upload

引入:

1
2
3
4
5
6
7
<script src="../js/lib/jquery/1.9.1/jquery.min.js"></script>//最好1.8版本向上
<script src="../js/vendor/jquery.ui.widget.js"></script>//必须
<script src="../js/jquery.iframe-transport.js"></script>//兼容IE必须
<script src="../js/jquery.fileupload.js"></script>//必须
<script src="../js/cors/jquery.xdr-transport.js"></script>//跨域 非必须
<script src="../js/jquery.fileupload-process.js"></script>//进度 非必须
<script src="../js/jquery.fileupload-validate.js"></script>//验证 非必须

上传的主要文件是前四个,如果需要验证和进度条功能则需要引入最后两个文件。

Ps:顺序最好不要乱,有依赖关系!

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$('#fileupload').fileupload({
dataType: 'json',//上传返回结果

url:'',//上传目标路径
fileInput: $('input:file'),//指定上传的对象,值必须是jquery对象
singleFileUpload:true,//是否单文件上传

multiple:true,//是否多文件上传
autoUpload:false,//是否自动上传
forceIframeTransport:true,//强制使用iframe传输,IE必须
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,//文件类型
maxFileSize: 10000000, // 10 MB(有坑)
minFileSize: undefined, // No minimal file size
maxNumberOfFiles: 10,//最大上传文件数
add : function(e, data) {
data.files[0]//文件对象
data.files[0].name//文件名
},//添加文件的回调,data不是文件本身,是一个包含文件的对象
send : function(e,data) {},//开始发送的回调
done : function(e, data) {},//文件上传完成的回调,data是返回的对象
fail : function(e,data) {}.//上传失败的回调
always : function(e,data) {},//不管文件上传成功不成功,还是停止了,过程结束的回调。
progress: function (e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#upload-progress').css('width',progress + '%');

},//上传进度的回调
)}

以上是初始化内容,具体API 查看Github:https://github.com/blueimp/jQuery-File-Upload/wiki/Options

2.Seajs改造

原:

由于代码中只支持AMD规范,而Seajs是CMD规范,故将其改造。

将上图中的代码删除,并添加

1
2
3
define(" "function(require,exports){

})

3.jQuery File Upload上传插件在第一次选择文件后进行取消操作,第二次选择文件后进行上传操作,会将第一次选择的图片也上传

大致原因是click事件的绑定,每次触发add回调时,click事件handler都会进行绑定。

因此,在第一次add时,handler被绑定到input:file上。

第二次add,再次绑定handler,这次针对的是第二个文件。

所以,这两个文件都被绑定在了input:file上,并在第二次点击上传按钮时进行提交。所以在绑定click事件处理程序之前,向按钮添加unbind解决这个问题。

参考:(解决来源)问题大同小异:(https://stackoverflow.com/questions/53812048/jquery-file-upload-plugin-uploads-the-first-image-again-on-uploading-the-second)

4. 验证文件类型、大小失败

具体原因未知,但是有一种麻烦的解决办法,就是手写验证,emmm…,那 jquery-fileupload-validate 要你何用?

参考:(解决来源) https://stackoverflow.com/questions/15549094/jquery-file-upload-plugin-how-to-validate-files-on-add

还有个激烈讨论的帖子https://stackoverflow.com/questions/17451629/maxfilesize-and-acceptfiletypes-in-blueimp-file-upload-plugin-do-not-work-why#