JQuery 文件上传插件 plupload 使用总结

	//JQuery 文件上传插件 plupload 使用总结
	//html页面代码部分,只需要引入相关的plupload包及设置一个div编写一小段js代码
	<div id="uploader" class="modal hide" role="dialog"
		aria-labelledby="uploaderLabel"></div>
	<a id="uploaderBtn" class="btn" href="#uploader" data-toggle="modal">文件上传</a>
	<script type="text/javascript" src="${ctx}/static/plupload-2.0.0/js/plupload.full.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plupload-2.0.0/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plupload-2.0.0/js/i18n/zh_CN.js"></script>
	<script type="text/javascript">
		//plupload 上传文件插件,使用jquery编写。
		//插件官网地址:http://plupload.com/
		//plupload.full.min.js对应的开发版本为plupload-2.0.0/js/plupload.dev.js
		//plupload error方法定义在plupload.dev.js中,
		//控件调用时的错误提示判断代码在plupload-2.0.0/js/jquery.ui.plupload/jquery.ui.plupload.js中
		$(function() {
			$("#uploader").bind('show',function(){
				$('#uploader').pluploadQueue({
					url : '${ctx}/upload/file',
					multipart_params:{dataType:'install'},
					max_file_size : '10mb',
					filters : [
						{title : "Excel files", extensions : "xls,xlsx"}
					],
					rename: false,
					multiple_queues:true,
					prevent_duplicates:true,
					flash_swf_url : '${ctx}/static/plupload-2.0.0/js/Moxie.swf',
					silverlight_xap_url : '${ctx}/static/plupload-2.0.0/js/Moxie.xap',
					init:{
						Error: function(up, err) {
							//当服务器端返回错误信息时error方法显示错误提示,
							//服务器端返回错误信息会被plupload转换为-200 http错误,
							//所以只能做==-200比较。更好的提示,需要修改插件源代码。
							if(err.code==-200){
								alert("文件格式错误,请检查后重新上传!");
							}
							if(err.code==-602){
								alert("文件已存在!");
							}
						},
					}
				});
			});
		}); 
	//plupload转换服务端错返回的错误代码方法如下,代码在plupload.dev.js中
					function handleError() {
					if (retries-- > 0) {
						delay(uploadNextChunk, 1);
					} else {
						file.loaded = offset; // reset all progress

						up.trigger('Error', {
							code : plupload.HTTP_ERROR,
							message : plupload.translate('HTTP Error.'),
							file : file,
							response : xhr.responseText,
							status : xhr.status,
							responseHeaders: xhr.getAllResponseHeaders()
						});
					}
				}

	//服务器端处理文件上传代码,简单实现了在处理有错误时返回错误状态,以供plupload的error方法调用显示提示框
	//服务器端使用spring MVC ,代码如下:
	@RequestMapping(value = "file", method = RequestMethod.POST)
	public @ResponseBody
	String uploadFile(@RequestParam("file") MultipartFile file,
			@RequestParam("dataType") String dataType,
			HttpServletResponse response ) {
		UploadFile entity = new UploadFile(file.getOriginalFilename(), dataType);
		
		if ("install".equals(dataType)) {
			//读取文件内容并保存至数据库,如果错误返回boolean状态
			boolean bl =excelReadAndSave(file);
			//fileUploadInfoExcelRead(file);
			if(bl){
				uploadFileSerivce.save(entity);
			}else{
				//String str="die('{'jsonrpc':'2.0','error':{'code':501,'message':'Failed to open output stream.'},'id':'id'}')";
				//如果文件处理错误,返回错误信息
				//必须设置返回报文header信息状态,1300是随便取的,plupload插件回转换掉错误码,
				//返回什么其实不重要,只要不是200正常状态就行
				response.setStatus(1300);
				return "{'error', 4}";
			}
		} else {
			boolean bool =fileUploadInfoExcelRead(file);
			if(bool){
				uploadFileSerivce.save(entity);
			}else{
				response.setStatus(1300);
				return "{'error', 4}";
			}
		}

		return "{'success', 'true'}";
	}
	
	

	

猜你喜欢

转载自tbs005.iteye.com/blog/1968359