1、文件引用(官网上随便找个栗子)javascript
<script src=".../jquery-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script> <script src=".../jquery-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script> <script src=".../jquery-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
2、准备input控件html
//data-url 后台请求地址 accept 文件类型(其实这个是给PC用的) 官网搬运工 <input id="uploadFile" type="file" name="files[]" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" data-url="${ctx}/ydzijin/zjxmgxzjjhshangbaoT/import" multiple>
3、input 时间处理 干活 (声明只为知足我工做上的需求)java
//将input加载成fileupload控件 $('#uploadFile').fileupload({ dataType: 'JSON', //返回数据类型 maxNumberOfFiles : 1, //上传文件数 maxFileSize: 5000000, //上传文件大小 submit:function (e, data){ //文件上传前回调 返回true 才发送上传 //获取文件类型 var type = data.files[0].type; //检测文件类型 //application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet if(type == 'application/vnd.ms-excel' || type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){ return true; } //提示信息 top.$.jBox.tip("上传文件类型错误!", 'error'); return false; }, progressall: function (e, data) { //文件上传时回调 用于显示上传进度 }, done: function (e, data) { //成功或回调 } });
4、后台处理(有点意思) Spring MVCjquery
根据官网Spring MVC 栗子完成。这个控件好像不能直接帮你把文件注入到MultipartFile 须要注入请求MultipartHttpServletRequest 直接上代码app
@RequestMapping(value = "import", method=RequestMethod.POST) @ResponseBody public Object importFile(MultipartHttpServletRequest request, HttpServletResponse response){ //获取全部文件名的迭代器 Iterator<String> fileNames = request.getFileNames(); MultipartFile file = null; //拿到每一个文件 while (fileNames.hasNext()) { file = request.getFile(fileNames.next()); } //拿到文件你想干吗就干吗 收工 return null; }
5、总结ui
此篇博文只求使用,不深刻剖析任何原理。url