Extjs 上傳檔案 IE不相容的問題[提示下載儲存]
阿新 • • 發佈:2019-01-05
我最不喜歡的瀏覽器的是IE,但無奈很多專案的客戶使用的是IE.
在使用Extjs做檔案上傳時,其他瀏覽器沒有問題,但IE卻一個勁提示儲存檔案,看服務端執行,它其實是執行成功了已經,但客戶端的進度條卻一個勁的在載入。
原因是:
IE瀏覽器對Content-Type = application/json,會出現下載儲存
IE瀏覽器對Content-Type = text/html,返回資訊按html處理
所以我們需要在程式碼中改變response的返回值來使IE上可以正常的執行:
JS程式碼:
var importform = new Ext.form.FormPanel({ labelAlign : 'right', fileUpload:true, items : [ { xtype : 'filefield', id:'upFile', name : 'file', fieldLabel : '匯入', labelStyle : "text-align:right;", labelWidth : 50, msgTarget : 'side', allowBlank : false, anchor : '100%', buttonText : '選擇檔案' } ], buttonAlign : 'center', buttons : [ { text : '上傳', handler : function() { if (importform.form.isValid()) { importform.getForm().submit({ url : 'forecast/importForecast', waitMsg : '正在提交資料', waitTitle : '提示', success : function(response, options) { var message = options.result.message; if(message == "ok"){ Ext.Msg.alert('提示', "上傳成功"); }else if(message == "ver"){ Ext.Msg.alert('提示', "請檢查版本號是否正確"); }else if(message == "type"){ Ext.Msg.alert('提示', "你上傳的檔案型別錯誤"); } importWin.hide(); deliveryStore.reload(); }, failure : function(response, options) { Ext.Msg.alert('失敗', '匯入檔案失敗'); } }); } } }, { text : '重置', handler : function() { importform.getForm().reset(); } }, { text : '取消', handler : function() { importform.getForm().reset(); importWin.hide(); } } ] });
controller程式碼:
/** * 上傳 即匯入資料 * @param file * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/importForecast") public ResponseEntity<String> importForecast(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception { Map<String,String> map = new HashMap(); map.put("roleId", request.getSession().getAttribute("roleId").toString()); String result = ""; HttpHeaders responseHeaders = new HttpHeaders(); responseHeaders.setContentType(MediaType.TEXT_HTML); try { String fileName = file.getOriginalFilename(); long size = file.getSize(); if (!(fileName == null || fileName.equals("")) && size > 0) { DmtTsUser user = (DmtTsUser) request.getSession().getAttribute( "user"); result = forecastService.importForecast(file, fileName, map); } } catch (Exception e) { e.printStackTrace(); } String json = "{\"success\":true,\"message\":\""+result+"\"}"; return new ResponseEntity<String>(json, responseHeaders, HttpStatus.OK); }
try的部分是具體的實現檔案上傳的程式碼