最近做了一個個人部落格系統，在新增修改“博主資訊”功能中有一項選擇頭像，用過<input type="file" />控制元件的都知道，選擇完圖片之後顯示的只是檔案的名字，而我想將圖片顯示在頁面上，初步的想法是選擇完圖片後提交到後臺，然後返回圖片的地址，在重新整理頁面，圖片就可以成功的顯示在頁面上了，但是這種做法讓使用者的體驗很差，我只是單單的選擇了一個頭像頁面就要重新整理嗎？顯然這樣是行不通的，所以我決定用ajax非同步提交圖片到後臺，這樣就無需再重新整理頁面了。這裡我使用了jquery提供的ajax非同步提交。首先要引入jquery所需的js檔案

<script  src="你的路徑/jquery-form.js"></script>
<script  src="你的路徑/jQuery.js"></script>

表單的部分

  由於<input  type="file" />控制元件的外觀比較醜陋，而且選擇完檔案後還會顯示檔名，所以，我將它設定為透明屬性，然後通過點選“更換頭像”按鈕來呼叫上傳檔案控制元件的click（）來達到選擇檔案的目的

<form action="admin/blogger/upload.do" id="form"  method="post" enctype="multipart/form-data">
				<div>
					博主頭像：<input id="file"  name="file" type="file" onchange="upload()" style="position: absolute; filter: alpha(opacity = 0); opacity: 0; width: 30px;"/>
				</div>
				<div style="width: 200px;height: 220px; border:3px solid #9bdf70;">
					<img id="image" alt="" src="${pageContext.request.contextPath}/static/images/head.jpg" width="194" height="214">
				</div>
				<div>
					<input type="button" value="更換頭像" onclick="chooseImage()" />
				</div>
			</form>
 

這裡我的檔案路徑和名稱使用的是固定的，沒有從後臺獲取，也就是無論選擇什麼圖片傳到後臺後都會以這個名稱來為該圖片命名。

url地址後加Math.random()是因為IE的快取，當我們使用了相同的url地址時瀏覽器就會從快取中查到圖片，結果導致圖片不會改變，當url後加了random之後url的地址基本可以保證每次都是不同的，也就能正確的顯示圖片了。

至於ajaxSubmit（options）options是提交表單所需要設定的一些引數url:提交到後臺的地址,type ：是以get提交還是post提交dataType：返回的資料型別 success:提交成功後執行的回撥函式，errer：失敗後執行的回撥函式,其他的我就不多說的想了解更多的同學可以查詢相關資料深入研究

注意：由於jquery-form.js版本的問題導致了可能提交成功了但是執行的回撥函式確實error，（比如我正在用的版本，找了好半天才找出來原因。。）

function chooseImage() {
		$("#file").click();		
	}
	function upload(){
		var options={
				url:'後臺地址',
				type:'POST',
				dataType:'script',
				success:function(){
					var url="/MyBlog/static/images/head.jpg?"+Math.random();
					var url=$('#image').attr('src',url);
				}
			};
			 $("#form").ajaxSubmit(options);  
	         return false;  
	}

@RequestMapping(value="upload")
	public void upload(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws Exception{
		String path = request.getSession().getServletContext().getRealPath("static/images"); 
		path+="/head.jpg";
		file.transferTo(new File(path));
	}