jquery-file-upload 简单使用(Hello)

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

相关文章
相关标签/搜索