一，文件上传插件webUploader 使用方法请见 http://fex.baidu.com/webuploader/getting-started.html
这个插件有个坑，困扰我好久才找到解决办法，就是使用webUploader点击浏览没有反应，一定要按F12才能点击 请参照此文：https://blog.csdn.net/rock154/article/details/80289696
webuploader插件如果你要自己获取到浏览的文件上传给后台的话，可以使getFiles()方法来获取
上传文件到后台：参照此文 ：https://www.cnblogs.com/labnizejuly/p/5588444.html https://www.cnblogs.com/007sx/p/7520529.html
webuploader 使用upload()方法上传文件如何传自已的参数值给后台 https://blog.csdn.net/tuchui88/article/details/77856968
https://blog.csdn.net/w592376568/article/details/78733511
//上传文件之前，添加要给后台传的参数 uploader.off('uploadBeforeSend').on('uploadBeforeSend', function (object, data, header) { data.json = JSON.stringify({bjNo: bjNo, delFileId: delFileId.join(',')}); });
webuploader 的 fileNumLimit 定义了，不能再动态更改了，看了一下源码，是通过 beforeFileQueued 事件控制，如果想实现动态改变话，自己可以重写此方法，如下：
//图片上传识别后，再次点入弹窗删除已上传的图片，再点取消还原图片，因为图片已从uploader对象中删除了，会导致可以多上传删除又取消的文件个数 var flag=true; var max=9; //重写beforeFileQueued 处理文件数量控制 uploader.off('beforeFileQueued').on( 'beforeFileQueued', function( file ) { var count=$('.fileBoxUl li').length;//当前图片个数 if ( count >= max && flag ) { flag = false; this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file ); setTimeout(function() {//setTimeout添加异步，会等待主线程全部执行完成，才来执行此处，这样有多个文件是多余的，也只会弹一次错误框 flag = true; }, 0); } return count >= max ? false : true; });
二，html 文件上传控件，生成缩略图展示，并上传给后台
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> --> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $("#file0").change(function () { $('#imgDiv').empty(); for(var i=0;i<this.files.length;i++){ var objUrl = getObjectURL(this.files[i]); if (objUrl) { $('#imgDiv').append('<img src="'+objUrl+'" height="70" id="img0">'); } } }); //还没有上传到服务器之前要显示图处缩略图，获取url function getObjectURL(file) { var url = null ; if(file){ if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } } return url; } $('#btnUpload').click(function(){ console.log($("#file0")[0].files); var formData = new FormData(); formData.append('file', $("#file0")[0].files); $.ajax({ url: 'http://common1.trafree.com:33050/bj/manager/manual/importFile', type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(res) { console.log("success"); }) .fail(function(res) { console.log("fail"); }); }); }); </script> </head> <body> <input type="file" name="file0" id="file0" multiple="multiple"> <div id="imgDiv"><img src="" height="70" id="img0"></div> <input type="button" id="btnUpload" value="上传"> </body> </html>
要把以上的上传文件功能设计得漂亮点，参照此文 ：https://www.cnblogs.com/kongxianghai/p/5624785.html
三，上传文件控件里的文件上传给后台还可使用jquery.form.js的 ajaxSubmit 方法 ajaxSubmit 会将整个form表单传给后台，后台自己去解析表单数据
以下事例是，当文件上传时传给后，后台将excel里的信息解析出来，返回给前台展示：
<form id="importExcelForm" enctype="multipart/form-data" style="display:inline;"> <span class="btn btn-warning fileinput-button"> <span>导入</span> <input type="file" id="uploadExcel" name="uploadExcel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> </span> </form>
//乘客信息导入弹窗导入Excel文件改变事件 .on('change'+eventSpace,'#uploadExcel',function () { $('#importExcelForm').ajaxSubmit({ dataType: "json", type:'POST', url:options.config.url.importTravExcel, success: function (res) { if(res.error.code==0) { var data=res.data; $('#importTravDialog [name="adtNum"]').text(data.adtNum); $('#importTravDialog [name="cnnNum"]').text(data.cnnNum); $('#importTravDialog [name="infNum"]').text(data.infNum); $('#importTravDialog [name="stuNum"]').text(data.stuNum); loadTravsTable(data.travs||[]); $('#uploadExcel').val('');//把上传文件控件清空，以便下次再选择同一个文件时也能触发事件 } } }); })
form 在使用包含文件上传控件的表单时，form需加上enctype="multipart/form-data"
四，js允许上传多个文件，假如选择了多个上传，又删除了几张，如何实现不把删除的文件传给后台
以下方法似乎也是OK的：
file multiple多选无法删除里面已经选中的文件，会一起回发服务器，但是可以通过js记录删除的图片下标，一起回发服务器，然后服务器遍历Files容器保存的时候对比被删除下标，对比成功则不保存这张图片