jQuery上传文件,都是写好的ajaxFileUpload插件,这里介绍的是我常用的一个以及它的使用方法。
ajaxFileUpload使用
ajaxFileUpload原理是创建表单并用JS去提交的方式,其中上传是对文件的配置方式和ajax很像,如下代码块所示。
$.ajaxFileUpload({url: , //访问路径secureuri:false, //是否启用安全提交,默认为falsedata:{},fileElementId:\'file\', //文件选择框的id属性dataType:\'text\',//服务器返回的数据类型。可以为xml,script,json,html,text。如果不填写,jQuery会自动判断})
使用方法:
- 第一步 ,引入js资源,注意要先引入jQuery,再引入ajaxFileUpload,注意顺序;
` <script src=\"jquery-1.7.1.js\" type=\"text/javascript\"></script> `` <script src=\"ajaxfileupload.js\" type=\"text/javascript\"></script>`
- 第二步,页面代码,这里用了bootstrap的框架,其余代码都差不多;
<form action=\"#\" id=\"upLoadForm\"class=\"form-horizontal form-bordered\"><div class=\"form-body\"><div class=\"form-group\"><label class=\"control-label col-md-2\">上传Excel</label><div class=\"col-md-10\"><div class=\"col-md-4\"><input style=\"padding-top: 7px;\" type=\"file\" id=\"file\"name=\"file\" accept=\".xlsx\"/></div><div class=\"col-md-2\"><a class=\"btn blue\" id=\"importantAppUpload\">上传</a></div></div></div></div></form>
- 第三步,JS代码;
$.ajaxFileUpload({url: \'\',secureuri:false, //是否启用安全提交,默认为falsedata:{},fileElementId:\'file\', //文件选择框的id属性dataType:\'text\', //服务器返回的格式,可以是json或xml等success:function(data){ //服务器响应成功时的处理函数},error:function(data, status, e){ //服务器响应失败时的处理函数swal(\"操作失败!请重试!\");}});
- 第四步,Java后台代码;
@RequestMapping(\"/fixedFlashRatioDev\")@ResponseBodypublic String fixedFlashRatioDev(HttpServletRequest request, @RequestParam(value = \"file\", required = false) MultipartFile file) {String target = null, dateType = null;if (file == null || file.getSize() == 0) {//return \"请选择xlsx文件\";return \"1\";}String fileName = file.getOriginalFilename();if (fileName.substring(fileName.lastIndexOf(\".\")).equals(\".xlsx\")) {String path = System.getProperty(\"java.io.tmpdir\") + File.separator + \"UploadTxt\" + File.separator;File targetFile = new File(path, \"文件名.xlsx\");if (!targetFile.exists()) {targetFile.mkdirs();}//保存try {file.transferTo(targetFile);//读取上传的excel文档到数据库(excel文档格式固定)Map<String, List<Map>> list = allAuditService.importFixedFlashRatio(path + \"f文件名.xlsx\", dateType, target);if (list == null || list.size() == 0) {//txt解析出错return \"2\";}allAuditService.fixedFlashRatio(list);return \"0\";} catch (Exception e) {e.printStackTrace();logger.error(\"上传文件失败出现异常\", e);//return \"上传文件失败出现异常\";return \"3\";} finally {DataSourceContextHolder.clearDataSource();}} else {//return \"只支持xlsx文档\";return \"4\";}}
注意:ajaxFileUpload的配置dataType属性最好不要空,file中的name属性要写,否则会报错