當你無法分辨長的很像的英文的時候搭幻，能夠拯救你的就只有一遍又一遍的試錯了疾牲。
前言介紹
最近項目需要一個頁面單獨上傳的功能，要求頁面能夠做到多文件上傳狡蝶。于是便去尋找 ajax 上傳文件的插件绢掰，找到 github 排名最高的 'jQuery-File-Upload' 插件痒蓬，開發(fā)者是 'buleibm'。一開始還沒想過這是誰滴劲，后來看到越來越多插件的作者是 'blueibm'攻晒，一想，原來這貨是IBM啊 Ψ(￣?￣)Ψ
給出官方文檔地址：https://github.com/blueimp/jQuery-File-Upload/wiki
簡單開始
只需要簡單的 ajax 上傳功能很容易配置班挖，首先鲁捏，引入必要的js文件
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.17.0/js/vendor/jquery.ui.widget.min.js"></script>
<!-- 可選，用于兼容古代瀏覽器 -->
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.17.0/js/jquery.iframe-transport.min.js"></script>
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.17.0/js/jquery.fileupload.min.js"></script>
然后調用初始化代碼
<input id="fileupload" type="file" name="files[]" data-url="server.php" multiple>
<script>
$('#fileupload').fileupload();
</script>
搞定（data-url用于配置文件上傳的地址萧芙，也可以配置到 js 的初始化代碼中）
上傳進度
記得前幾年想做文件上傳進度顯示是非常麻煩的给梅，需要手動寫方法不斷向服務端請求上傳的進度。如今双揪，在 html5 的光環(huán)下动羽，顯示文件上傳進度已經變得非常容易了。jquery-file-upload插件提供一個配置函數用于監(jiān)聽文件的上傳進度渔期，在初始化代碼中配置运吓，如下代碼即可
progress: function(e,data){
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(progress);
}
隊列模式
這個頁面要求的是多文件上傳，總不能等一批文件上傳了再上傳另一批文件吧疯趟？所以文件上傳隊列功能就比較重要拘哨，其實也就是像模仿百度云、微云之類的文件上傳方式信峻。只需要添加一個配置項即可
sequentialUploads: true
這個時候倦青，上傳多個文件就能夠實現一個文件接著一個文件上傳的效果了，不得不說盹舞，這個插件確實很強大产镐。
圖片預覽
扒拉扒拉上傳一堆圖片，結果想不起來哪些圖片已經上傳成功矾策，這下就尷尬了。所以簡單的圖片預覽功能也不能少峭沦。
前端顯示圖片有兩種方式贾虽，一種是通過img標簽加上src屬性（由于使用服務端的圖片地址會帶來額外的開銷，img 的方式也會選擇本地的圖片轉換成 base64 編碼直接在瀏覽器顯示）吼鱼，另一種就是通過生成canvas直接顯示圖片蓬豁。
最初的想法是使用file綁定的文件直接生成一個base64地址绰咽，獲取file值的辦法就是找到對應元素，使用 js 獲取其value地粪， 但是在同時添加多個文件的時候取募，沒有辦法獲取到所選文件的列表，嘗試在add方法中打印出來每一個文件的data數據蟆技，但是打印出來file的value都是同一個玩敏，嘗試了很多遍，都是一樣的結果质礼。所以旺聚，這個思路失敗。
然后就開始查看官方的例子眶蕉，發(fā)現就有自帶圖片預覽功能砰粹。據調查發(fā)現，這款插件使用的是 canvas 的方式造挽。要實現圖片預覽的功能還需要添加額外的 js 文件
<script src="http://cdn.bootcss.com/blueimp-load-image/2.12.2/load-image.all.min.js"></script>
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.17.0/js/jquery.fileupload-image.min.js"></script>
這個時候生成的file對象中已經添加好了preview子對象（是一個canvas元素）碱璃，應該在什么時候使用這個子對象呢？也找不到官方的說法饭入，只能自己啃官方給的例子的源代碼嵌器。最后發(fā)現，canvas添加到頁面是綁定在processalways事件中圣拄，同時添加生成 canvas 最大寬度和高度嘴秸，代碼如下：
previewMaxWidth: 512,
previewMaxHeight: 5000000,
processalways: function(e,data) {
var index = data.index,
preview = data.files[index].preview;
console.log(preview);
}
另外，因為用到了process的綁定庇谆，還需要引入 js 文件
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.17.0/js/jquery.fileupload-process.min.js"></script>
這個文件一定要在jquery.fileupload-image.min.js文件前引入岳掐，否則頁面會報錯（坑爹的官方不給解釋啊）
自己一直卡在這一步饭耳，在完成圖片預覽功能之后串述，發(fā)現進度顯示功能出問題了，進度條不再刷新寞肖。一直找纲酗，一直找，直到發(fā)現process和progress是兩個單詞后新蟆，恍然大悟（進度不再更新的原因就是一直把兩個單詞當做了同一個觅赊，所以progress的功能寫到了process里面，而process只會執(zhí)行一次）琼稻，一眼看錯吮螺，浪費兩小時，說得就是這回事了。
其他
額外還有一些小功能鸠补，文件類型的限制萝风，拖拽功能等，參加如下：
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
dropZone: $(document),
其他一些功能可以參加官方文檔詳閱紫岩。
總結
之前也做過一些文件上傳的功能规惰，要么就是停留在本文中的 '簡單開始'，要么就是使用整個打包好直接使用的插件bootstrap-file-upload泉蝌，這也是第一次使用功能自己搭配的組件歇万，認識到了插件的強大可擴展的功能，IBM果然還是厲害梨与。同時項目也使用了vue堕花，確實非常的好用，以下給出自己的本文的一個 demo 倉庫粥鞋，自行查看缘挽。
https://github.com/LancelotLewis/jqeury-file-upload-demo
附上個人博客對應博文地址：
https://lancelot_lewis.coding.me/2017/03/03/jquery/jQuery-File-Upload-blueimp-爬坑指南/
