<button type="button" style="height: 35px; " class="paymentBtn" onclick="javascript:open_upload();">上传交费明细</button> <input type="file" id="excel_file" name="excel_file" onchange="fileSelected();" style="display:none"> <button type="button" style="height: 35px;display:none; width: 120px;" id="start_upload" class="sel_btn" onclick="javascript:start_upload();">开始上传</button> <script type="text/javascript"> //打开选择文件窗口 function open_upload(){ var flag=document.getElementById("excel_file").click(); } //上传文件 function ajaxFileUpload(paymentTitle_,excel_file_,paymentYear_,paymentMonth_,paymentTimez_,paymentContent_) { $.ajaxFileUpload ( { url: '${ctxPath}/upload/uploadPreview', type:'POST', data: { 'paymentTitle': paymentTitle_, 'excel_file': excel_file_, 'paymentYear':paymentYear_, 'paymentMonth':paymentMonth_, 'paymentTimez':paymentTimez_, 'paymentContent':paymentContent_ }, secureuri: false, fileElementId: 'excel_file', //文件上传域的ID contentType: 'text/html', dataType: 'text', //返回值类型 一般设置为json success: function (data1,status) { var data=eval('('+data1+')'); hideLoading(); if(data.success){ $(".templateName").html(data.original_name); $("#notice").css('opacity','1'); var content=""; $.each(data.rList, function(i, item) { content+="<tr><td class='col-md-1 text-center'>"+item.xuhao+"</td><td class='col-md-2 text-center'>"+ item.uuid+"</td><td class='col-md-1 text-center'>"+ item.name+"</td><td class='col-md-3 text-center'>"+ item.phonenum+"</td><td class='col-md-3 text-center'>"+ item.bzmsg+"</td><td class='col-md-2 text-center'>"+ item.feenum+"</td></tr>"; }); content+="<tr><td></td><td></td><td></td><td></td><td style='text-align:right;'>总金额:</td><td class='text-center'>"+data.dangfei_total+"</td></tr>"; $('.dangfei_Wapper').show(); $(".dangfei_notice").html(content); $("#ensurediv").css('display','block'); }else{ sweetalert(data.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(XMLHttpRequest.responseText); //alert(textStatus); debugger; hideLoading(); sweetalert('服务器开小差了...'); }, complete: function(XMLHttpRequest, textStatus) { //this; // 调用本次AJAX请求时传递的options参数 } } ) return false; } </script>
dataType使用"json",contentType使用"application/json',后台返回字符串。
问题来了:1、虽然经过了SpirngMVC配置文件的设置来防止IE浏览器提示保存json文件,Controller返回json,但是在IE11下,仍然提示保存json文件。
解决办法:是页面改为text/html提交方式,后台通过response来返回响应内容。
2、jquery.min_1_9_1.js以及以后的版本,不支持ajaxfileupload.js中的browser.version属性设置
解决方法:添加jquery-browser.js 见附件。
注意页面引入顺序要注意,
<script src="${ctxPath}/lib/jquery.min_1_9_1.js"></script> <script src="${ctxPath}/lib/jquery-browser.js"></script> <script src="${ctxPath}/lib/ajaxfileupload.js"></script>
//页面做的兼容性设置 <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
后台代码
/** * 上传文件信息预览 * * @param * @return * @throws IOException */ @RequestMapping(value = "/uploadPreview", method = RequestMethod.POST) public void uploadPreview( @RequestParam(value = "excel_file", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException { String json = ""; Map<String, Object> resultMap = new HashMap<String, Object>(); try { json = JsonUtils.toJson(resultMap); } catch (Exception e) { // TODO: handle exception logger.error("uploadPreview", e); resultMap.put("msg", "上传出错或上传的Excel文件不合法"); resultMap.put("success", false); json = JsonUtils.toJson(resultMap); } response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); response.getWriter().print(json); }
最后还有一个问题,在IE9/IE10下有保护机制,只能通过点击上传标签来上传文件,不能通过其它按钮的触发时间来上传,否则,禁止提交文件。
解决办法:使用 <label for="excel_file" ></label>来替代Button,用其for属性来指向对应的<input type="file" id="excel_file" />标签,这样就能提交了,好奇快!
参考URL: http://blog.csdn.net/x1172031988/article/details/70142895