再用springMvc的時候要實現一個圖片上傳的功能，又不想重新整理頁面，

ajax又不能實現檔案上傳，於是就開始尋找非同步上傳的方法，終於找到了一種學習了一下：

jsp中：

<div class="shop_member_bd_left_pic">
	img id="img1" src="${pageContext.request.contextPath }/upload/img/${customer.image}.jpg" height="200" width="300"/>
	<form name="fileinfo" enctype="multipart/form-data" >
		<div class="div1">
			<div class="div2">更改頭像</div>
				<input type="file" name="imgfile" class="inputstyle" onchange="previewFile();"/>
			</div>
	</form>
</div>
 

//預覽圖片程式碼

function previewFile() {
	//var preview = document.querySelector('img');
	var preview = document.getElementById("img1");
	var file  = document.querySelector('input[type=file]').files[0];
	var reader = new FileReader();
	 reader.onloadend = function () {
  	      preview.src = reader.result;
	 };
	if (file) {
	      reader.readAsDataURL(file);
	      upload();
	} else {
		  preview.src = "";
	 }
}
 

//上傳圖片程式碼

function upload(){
		  var oData = new FormData(document.forms.namedItem("fileinfo")); //新建一個formData物件
		
		 //oData.append("CustomField", "This is some extra data"); //在這可以向表單新增額外的資料，這裡沒有新增
		
		  var oReq = new XMLHttpRequest(); 
		  		//XMLHttpRequest 物件用於在後臺與伺服器交換資料。該物件的好處：
				//在不重新載入頁面的情況下更新網頁
				//在頁面已載入後從伺服器請求資料
				//在頁面已載入後從伺服器接收資料
				//在後臺向伺服器傳送資料
		  oReq.open("POST", "${pageContext.request.contextPath}/customer/customerImg", true);
		  oReq.onload = function(oEvent) {
		    if (oReq.status == 200) {
		    	alert("更改頭像成功！");
		    } else {
		      alert("更改頭像失敗！");
		    }
		  };
		
		  oReq.send(oData);       
	}
 

關於 XMLHttpRequest.open()

初始化 HTTP 請求引數

語法：open(method, url, async, username, password)

method 引數是用於請求的 HTTP 方法。值包括 GET、POST 和 HEAD。

url 引數是請求的主體。大多數瀏覽器實施了一個同源安全策略，並且要求這個 URL 與包含指令碼的文字具有相同的主機名和埠。

async 引數指示請求使用應該非同步地執行。如果這個引數是 false，請求是同步的，後續對 send() 的呼叫將阻塞，直到響應完全接收。

如果這個引數是 true 或省略，請求是非同步的，且通常需要一個 onreadystatechange 事件控制代碼。

username 和 password 引數是可選的，為 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。

open只是初始化引數，傳送是由下邊的send（）程式碼傳送至後臺。

XMLHttpRequest 物件的 onload 回撥函式是在非同步請求載入完成後所執行的函式，當JavaScript 監測到請求的資料全部傳輸完成後就會觸發該函式。而 open() 函式設定非同步請求的 method、URL 和同步方式等引數，執行 open() 後再執行 send() 函式才開始向伺服器傳送請求。

其中oReq.status表示：伺服器反饋的狀態：

1xx - 資訊提示

2xx - 成功

3xx - 重定向

4xx - 客戶端錯誤

5xx - 伺服器錯誤

後臺程式碼：

@RequestMapping("/customerImg")
	@ResponseBody
	public String customerImg(HttpServletRequest request) {
		String result = "success";
		CustomerSpread customer = (CustomerSpread) request.getSession().getAttribute("customer");
		String path = request.getSession().getServletContext().getRealPath("");	 //獲取專案伺服器地址
		File file2 = new File(path+"\\upload\\img"); //設定一個檔案路徑
		if (!file2.exists()) { 
		     file2.mkdirs(); //如果資料夾不存在就建立所需的資料夾
	        }
		//二進位制上傳
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//獲取檔案
		CommonsMultipartFile imgfile = (CommonsMultipartFile) multipartRequest.getFile("imgfile");
		//判斷是否有檔案提交
		if(imgfile != null){
			if( !imgfile.isEmpty() ){
				  SimpleDateFormat sdf = new SimpleDateFormat("yyMMddHHmmssSSS");//到毫秒
				  String time = sdf.format(new Date()); //以時間設定為上傳的檔名
				  File file = new File(path+"\\upload\\img"+"/"+time+ ".jpg");
				  try {
					  imgfile.getFileItem().write(file); 
					  customer.setImage(time); 
					  customerService.setImage(customer); // 往資料庫寫入圖片名稱
					  request.getSession().setAttribute("customer", customer); //更新session
				  } catch (Exception e) {
					  result = "error";
				     e.printStackTrace();
				  }
			}
		}else {
			result = "error";
		}
		return result;
	}