最近專案上有一個小需求就是在form表單中上傳一個excel檔案，然後controller中對上傳的excel資料進行讀取然後執行dao操作

前端程式碼如下：

<div class="apply-r">
	<a class="pure-button upload" style="text-decoration: none" href="#" onclick="$('#upid').click();" >匯入商品</a>
	<input id="upid" style="display:none;" class="up-file" type="file" name="files" onchange="fileChange(this);"/>
</div>
 

//批量上傳檔案
function fileChange(target) {
	if (target.files && target.files[0]) {
		var file = target.files[0];
		target.value = "";
		var filedata = new FormData();
		filedata.append("multipartFile", file);
		doUpload(filedata);
	}
}

function doUpload(filedata) {
	console.log("doUpload");
	$.ajax({
		url: '#springUrl("/product/addBatch.do")',
		type: 'POST',
		data: filedata,
		async: false,
		cache: false,
		contentType: false,
		processData: false,
		success: function (result, status) {
			if (result.statusCode == 301) {
				$(".session-model").show();
				return;
			}
			if (status == "success" && result.success) {
				showTips(result.message ? result.message : result.returnMessage);
				productList(1)
			} else {
				showTips(result.message ? result.message : result.returnMessage);
			}
		}

	});
}
 

@RequestMapping(value="/addBatch.do")
@ResponseBody
public AjaxResponse addBatch(HttpSession session, @RequestParam("multipartFile") MultipartFile multipartFile) {
	AjaxResponse ajaxResponse = new AjaxResponse();
	try {
		String merchantId = ProcessSessionUser.getMember(session, CommonConstant.MEMBER_ID);
                //將匯入的文件的資料讀取出來
		List<ProductInfo> productInfoList = ExcelToObjectConvert.excelConvertToDomain(multipartFile, merchantId);
		//進行插入到資料庫的操作
		productManageService.addBatch(productInfoList);
		ProcessAjaxResponse.processResponse(true, ajaxResponse, null, ReturnCode.ADD_SUCCESS);
	} catch (Exception e) {
		logger.error("執行[addBatch]異常:", e);
		ExceptionConvert.convertException(ajaxResponse, e);

	}
	logger.info("返回web結果:{}", ajaxResponse);
	return ajaxResponse;
}
 

以上前端和後端的程式碼在google IE11上正確執行通過，但是在IE9上又出現相容性問題。

然後前端同事將程式碼修改成如下方式：

<div class="apply-r">
	<label>
       <a class="pure-button upload" style="text-decoration: none" >匯入商品</a>
       <form id="myForm" method="post" enctype="multipart/form-data">
	       <input type="file" id="upid" name="multipartFile" onchange="fileChange(this)" style="display:none"/>
	   </form>
	</label>
</div>

//批量上傳檔案
function fileChange(target) {
	var option = {
		url : '#springUrl("/product/addBatch.do")',
		type: 'POST',
		success : function(data) {
		   var objData = {};
		   if(data.indexOf('<pre>')>=0) {
			  objData = JSON.parse($(data).html());
		   } else{
			  objData = JSON.parse(data);
		   }
		   if (objData.statusCode == 301) {
			  $(".session-model").show();
			  return;
		    }
			if (objData.success) {
			  showTips(objData.message ? objData.message : objData.returnMessage);
			  productList(1)
			} else {
			  showTips(objData.message ? objData.message : objData.returnMessage);
			}
		},
		error: function(data) {
			 //alert(data.)
		},   
		  resetForm : true
	   };
	$("#myForm").ajaxSubmit(option);
	return false;
}

之前在postman除錯下，後臺程式碼修改之前的可以看出action返回的content-type為application/json;charset=UTF-8

所以這個時候我們要將後臺程式碼返回的content-type修改成文字格式

這篇文章詳細說明了Springmvc下content-type，其中重點關注下RequestMapping的一些引數值

consumes： 指定處理請求的提交內容型別（Content-Type），例如application/json, text/html;
produces:    指定返回的內容型別，僅當request請求頭中的(Accept)型別中包含該指定型別才返回

當然關於Spring如何返回處理JSON或者XML格式的資料可以使用到matter，這裡我們先說下這種方法，上篇文章中可以看出要修改成 文字格式就要將content-type修改成 text/plain

常見的媒體格式型別如下：

•     text/html ： HTML格式
•     text/plain ：純文字格式      
•     text/xml ：  XML格式
•     image/gif ：gif圖片格式    
•     image/jpeg ：jpg圖片格式 
•     image/png：png圖片格式

@RequestMapping(value="/addBatch.do",produces="text/plain;charset=utf-8")
@ResponseBody
public String addBatch(HttpSession session, @RequestParam("multipartFile") MultipartFile multipartFile) {
	AjaxResponse ajaxResponse = new AjaxResponse();
	try {
		String merchantId = ProcessSessionUser.getMember(session, CommonConstant.MEMBER_ID);
		List<ProductInfo> productInfoList = ExcelToObjectConvert.excelConvertToDomain(multipartFile, merchantId);
		productManageService.addBatch(productInfoList);
		ProcessAjaxResponse.processResponse(true, ajaxResponse, null, ReturnCode.ADD_SUCCESS);
	} catch (Exception e) {
		logger.error("執行[addBatch]異常:", e);
		ExceptionConvert.convertException(ajaxResponse, e);
	}
	logger.info("返回web結果:{}", ajaxResponse);
	return JSON.toJSONString(ajaxResponse);
}

所以要設定 charset=utf-8

我們可以在postman下進行檢視