关于 Jquery.Fileupload 的应用经验总结
因为实际项目中的需要，查找过很多上传文件的控件，但是都感觉不是很完美，或多或少存在一些缺憾。
直到遇到了它：Jquery.Fileupload
一个纯 Html5 的前端上传插件，并且支持很多版本的浏览器，
具体不多说，查阅官网：https://github.com/blueimp/jQuery-File-Upload
如何使用它？
在使用它之前需要引入一些相关的文件：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="../css/upload/jquery.fileupload.css" /> <script type="text/javascript" src="../js/upload/jquery.ui.widget.js"></script> <script type="text/javascript" src="../js/upload/jquery.iframe-transport.js"></script> <script type="text/javascript" src="../js/upload/jquery.fileupload.js"></script>
以上的文件是 Jquery.Fileupload 所需要的基本引用，由于它是完全支持依赖bootStrap前端框架，因此一定不能忘记首先引用这个框架才行。
以上文件引用完毕之后，就可以开始搭建具体的功能组件了。
接下来在 body 标签中增加上传组件按钮的布局，
<span class="btn btn-primary fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>请选择上传文件</span> <input id="fileupload" type="file" name="filedata" data-url="../people/toaddpic" multiple /> </span>
以上代码中，有几处参数需要解释一下：
data-url：它是表示你选择的图片即将要上传到的接口地址（也可以通过js脚本进行配置）。
multiple：此参数表示它是允许你一次性选择多个文件，如果不增加此参数，则每次只能选择一个文件进行上传操作。
配置好html的东西之后，接下来就是核心的Js功能部分的实现了：
$('#fileupload').fileupload({
dataType : 'json',
add: function (e, data) {
data.submit();
},
done: function (e, data) {
alert('上传完毕');
}
});
上面的Js代码就是最基础的上传模式写法。
它通过<input>标签中已经固定的 data-url 后台地址，自动将图片提交到后台接口，非常方便。
但这样有时也会带来很大的困惑，因为它无法让我们灵活的通过编码方式配置后台接口地址，那怎么办？
当然，强大的插件绝对不会固化你所想的事情，因此，还有另一种写法，而我个人也是比较喜欢此种写法的，它的优势比较灵活：
$('#fileupload').fileupload({
url: '../people/addfiles',
dataType : 'json',
add: function (e, data) {
data.submit();
},
done: function (e, data) {
}
});
上面这种写法，就是将 <input> 标签中的 data-url 地址，通过赋值到 url 属性的地址来解决，这样一来就可以通过动态代码来指定所要上传的后台接口地址了。
此处要注意，如果采用 url 脚本方式设置后台接口地址时，记得将 <input> 标签中的 data-url 属性去掉，如果不去掉会产生什么问题，我也不太清楚，印象中好像是 data-url 优先级高一些。
至此，上传文件的组件功能就全部完毕了，就是这么简单的一个插件，功能真的很强大。
文件上传模式
默认下，插件在文件上传时，是处于非队列模式的，什么意思？
就是，你选择了一堆文件（10个）插件会不分优先级的顺序，一股脑将这些文件送到接口，此时谁的体积小谁就先上传完毕。
通俗一点举个例子：
我选择了三个文件，A、B、C，他们的大小是不一致的，按照正常思的网络传输模式来讲，肯定是谁的体积小，谁最先上传完毕，
比如，A文件是2mb、B文件是3mb、C文件是100kb，那么不用多想肯定是C文件最先上传完毕。
但有时，我们需要按照我们选择的顺序，先上传A、再传B、然后再传C，
如果一定要这样的话，其实有一个笨蛋的方法就是：一张一张的选择上传，那么如果是100个文件，你还敢用这个办法么？
其实，插件的作者也考虑到了这个问题，那就是引入了一个属性：sequentialUploads
$('#fileupload').fileupload({
url: '../people/addfiles',
dataType : 'json',
sequentialUploads : true,
add: function (e, data) {
data.submit();
},
done: function (e, data) {
alert('上传完毕');
}
});
sequentialUploads 属性的配置就是为了解决，插件一股脑将选择的文件抛给后台接口这种野蛮的行为。
sequentialUploads 为 true，插件就会优雅的按照选择的顺序一个一个的发给后台接口地址，
反之，就等于开启了野蛮模式，有多少我就一次扔出去，才不管你受不受得了呢。
如何自定义参数提交？
初时使用这个插件，相信更多的困惑是，我该怎么传参？我可不可以控制什么时候提交？
内心的PS是：你有点过分了，你知道我到底想干嘛么？我根本并不需要你帮我做那么多事情，好不。
那么，这个问题其实也是有解决的。
首先来说一下参数的问题：
其实参数的解决是很简单的，如果你了解过说明文档，那么就不需要再看这段代码了：
//向后台传送的参数实体对象 var model = { params: "" }; $('#fileupload').fileupload({ url: '../people/addfiles', dataType : 'json', sequentialUploads : true, add: function (e, data) { //获取页面标签内容赋值参数实体 model.params = $("#id").val(); //将赋值完毕的参数实体，再赋值给插件formData属性 data.formData = model; data.submit(); }, done: function (e, data) { alert('上传完毕'); } });
简单来说，add 方法是 jquery.fileupload插件选择图片后即刻触发的一个添加事件（顾名思义就是添加了文件后，就会触发这个事件），在该事件内可以去完成你的业务处理过程。
或者也可以使用change事件，不跟本人没有实际的用过，只在官方文档一掠而过看到过，因为也不了解，所以就不说它了。
以上的方式就可以解决了参数的问题。
再来说说自定义上传的问题：
很遗憾的是，由于使用的业务范围和时间不是很多，一直没有找到这个插件上传该怎么配置主动触发提交而不是让它自动的去提交。
不过，幸运的是也是在闲来无事浏览文档时，发现了 autoUpload 这么个属性，这名字跟文档介绍一样，是否自动提交上传？
奇怪的是，你若是将它设置为 false，确实是不会自动提交了，但是更严重的问题也来了，没有可控的按钮主动触发它，就问你气不气。
不过，作为开发人员来说，这要是也算问题的话，那么就直接退休吧，不要再干不适合自己的事情了。
那么，该如何解决呢？代码如下：
//Fileupload 提交对象 var ObjUpload = null; //向后台传送的参数实体对象 var model = { params: "" }; $('#fileupload').fileupload({ url: '../people/addfiles', dataType : 'json', sequentialUploads : true, autoUpload : false, add: function (e, data) { //获取页面标签内容赋值参数实体 model.params = $("#id").val(); //将赋值完毕的参数实体，再赋值给插件formData属性 data.formData = model; ObjUpload = data; }, done: function (e, data) { alert('上传完毕'); } }); //提交按钮 $('#btn').click(function(){ ObjUpload.submit(); });
到此，关于 jquery.fileupload 上传插件的常用模式都已介绍完毕。
