jquery-file-upload 简单使用（Hello）

一、文件引用（官网上随便找个栗子）

<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>

---

二、准备input控件

  //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>

---

三、input 时间处理  干活  （声明只为满足我工作上的需求）

//将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) { //成功或回调
    }
});

四、后台处理（有点意思） Spring MVC

根据官网Spring MVC 栗子完成。这个控件好像不能直接帮你把文件注入到MultipartFile 需要注入请求MultipartHttpServletRequest 直接上代码

@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;
	}

五、总结

此篇博文只求使用，不深入剖析任何原理。

转载于:https://my.oschina.net/u/1272080/blog/308582