考虑浏览器兼容的文件上传

2024-04-27 15:13:34

字体：大中小

来源：转载

供稿：网友

方法一：使用FormData（因IE8不支持FormData, IE10才支持，因此此方法不兼容IE10以下的IE浏览器） 也可参考文章 http://www.jianshu.com/p/46e6e03a0d53

html:

js:

//新增行的保存及上传文件function uploadFile(data) { var fileObj = document.getElementById("inputfile").files; // js 获取文件对象 var FileController = "/action/add"; // 接收上传文件的后台地址 var form = new FormData(); //20160301 添加其他参数 form.append("param1",param1); form.append("param2",param2); if (fileObj.length != 0) { var i = fileObj.length; for (var j = 0; j < i; j++) { form.append("file" + j, fileObj[j]); // 文件对象 } } form.append("data", data); // xmlHttPRequest 对象 xmlhttpRequest = new XMLHttpRequest(); xmlHttpRequest.onreadystatechange = callback; xmlHttpRequest.open("post", FileController, true); /* event listeners */ // 进度条 // xmlHttpRequest.upload.addEventListener("progress", progressFunction, false); // xmlHttpRequest.addEventListener("load", uploadComplete, false); // xmlHttpRequest.addEventListener("error", uploadFailed, false); // xmlHttpRequest.addEventListener("abort", uploadCanceled, false); /* end listeners */ xmlHttpRequest.send(form);}function callback() { // 接收响应数据 // 判断对象状态是否交互完成，如果为4则交互完成 if (xmlHttpRequest.readyState == 4) { // 判断对象状态是否交互成功,如果成功则为200 if (xmlHttpRequest.status == 200) { // 接收数据,得到服务器输出的纯文本数据 var response = xmlHttpRequest.responseText; //console.log(response); if(response == 1) { enabledButton(); alert("保存成功!"); } else { alert("保存失败，请重新尝试!"); } enableButton(); }else{//!=200 alert("保存失败!"); enableButton(); } }}

方法二：使用form提交兼容各种浏览器,form提交后会刷新页面，且不太好获取返回参数。如要返回原始页面，需要用response.sendRedirect(原始页面url)进行转向。 html:

js:

//20160612 文件上传按钮 form表单提交function submitFile(){ var attach = document.getElementById("attach").value; alert("attach: " + attach); if(attach == undefined || attach == ""){ alert("请选择文件"); return; } uploadFileForm.action = "/tools/uploadFileAction"; uploadFileForm.submit();}

方法三：使用jquery.form.js支持的Ajaxsubmit进行文件上传 html:

js:

//在表单上追加input hidden元素存放其他参数function appendInputElementForForm(formId,inputName,inputValue){ var myh = document.createElement("input"); myh.type = "hidden"; myh.value = inputValue; myh.id = inputName; myh.name = inputName; document.getElementById(formId).appendChild(myh); alert(document.getElementById(inputName).value); }//20170207 文件上传ajax Form表单提交function ajaxSubmitFile(){ var attach = document.getElementById("attach2").value; alert("ajaxSubmitFile attach2: " + attach); if(attach == undefined || attach == ""){ alert("请选择文件"); return; } appendInputElementForForm( "uploadFileForm2", "param1", "123"); appendInputElementForForm( "uploadFileForm2", "param2", "测试参数"); $('#uploadFileForm2').ajaxSubmit({ type:"post", url:"/tools/ajaxUploadFileAction", data:$('#uploadFileForm2').serialize(), dataType:"json", error:function(data){ alert(data); }, success:function(data){ alert("ajaxSubmit上传成功"); alert("下载地址： " + data.data.attachment); } }); }

最后附带上后台的java代码：

//20160612 文件上传@RequestMapping(value = "ajaxUploadFileAction")public ModelAndView ajaxUploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception{ ResponseInfo responseInfo = new ResponseInfo(); logger.info("ajaxUploadFile param1: " + request.getParameter("param1")); logger.info("ajaxUploadFile param2: " + request.getParameter("param2")); try { //将当前上下文初始化给CommonsMutipartResolver （多部分解析器） CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver( request.getsession().getServletContext()); // 判断是否是多数据段提交格式 if (multipartResolver.isMultipart(request)) { MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request; logger.info("ajaxUploadFile param1: " + multiRequest.getParameter("param1")); logger.info("ajaxUploadFile param2: " + multiRequest.getParameter("param2")); Iterator<String> iter = multiRequest.getFileNames(); logger.info("iter.hasNext(): "+iter.hasNext()); Integer fileCount = 0; while (iter.hasNext()) { MultipartFile multipartFile = multiRequest.getFile(iter.next()); String fileName = multipartFile.getOriginalFilename(); logger.info("upload demand filename: " + fileName ); //20170207 针对IE环境下filename是整个文件路径的情况而做以下处理 Integer index = fileName.lastIndexOf("//"); String newStr = ""; if(index>-1){ newStr = fileName.substring(index+1); }else{ newStr = fileName; } if(!newStr.equals("")){ fileName = newStr; } logger.info("new filename: " + fileName ); if (multipartFile != null) { HashMap<String,Object> result = DispatchInterfaceUtil.uploadFileByInputStream (multipartFile.getInputStream(),multipartFile.getSize(),fileName); Integer statusCode = (Integer)result.get("statusCode"); logger.info("statusCode: " + statusCode); if( statusCode.equals(0) ){ String attachment = (String)result.get("attachment"); responseInfo. setStatus(true); responseInfo.put("attachment", attachment); }else{ String errorMessage = (String)result.get("errorMessage"); logger.error( "errorMessage: " + errorMessage); responseInfo.setStatus(false); responseInfo.setMsg("文件上传失败"); } } fileCount++; }//while logger.info("fileCount: " + fileCount); } }catch (Exception e) { // TODO: handle exception responseInfo.setStatus(false); responseInfo.setMsg("后台出现异常"); logger.warn("Error: ", e); } response.setContentType("text/html; charset=utf-8"); response.getWriter().write( JSON.toJSONString(responseInfo)); return null; }

**注意： IE10可以支持application/json格式的Response了，也就是说低于IE10版本一下的IE浏览器都需要使用text/html格式的Response。在Response头中指定Content-Type为text/html，是可以解决问题的。这样返回给客户端的是一个JSON字符串（并非JSON对象），无需IE来解析。**

上一篇：使用js计算N天前后的日期

下一篇：手机归属地免费接口查询