1. 程式人生 > >Extjs 上傳檔案 IE不相容的問題[提示下載儲存]

Extjs 上傳檔案 IE不相容的問題[提示下載儲存]

我最不喜歡的瀏覽器的是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的部分是具體的實現檔案上傳的程式碼