//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'}"; }
JQuery 文件上传插件 plupload 使用总结
猜你喜欢
转载自tbs005.iteye.com/blog/1968359
今日推荐
周排行