form提交表單上傳圖片

標籤：style   blog   http   tar   ext   com   

上傳圖片後將圖片顯示在當前頁面上，本打算用ajax，但是上傳圖片必須設定 enctype="multipart/form-data"，而要提交之後頁面不跳轉，所以查資料後採用form+iframe的方式。空的iframe並且不顯示，將form的target設定為iframe，就會提交到iframe上，從而實現不重新整理頁面上傳。

<form name="uploadForm" id="uploadForm" method="post" enctype="multipart/form-data"
action="/cars/api/v1/template/createTemplate" target="uploadFrame">
<p style="margin:10px 0;">上傳圖片: &nbsp;&nbsp;
<input type="file" name="imageFile" ID="fupPhoto"/>
<input type="text" name="brand" ID="brand" />
<input type="submit" id="fileSubmit" name="Submit" value="上傳" />
<iframe name="uploadFrame" id="uploadFrame" style="display:none;"></iframe>
</p>
</form>

<img id="imgPhoto" src="" width="300">

js:

$("#fileSubmit").click(function(){
if($.browser.msie){
window.uploadForm.submit();
}else{
$("#uploadForm").submit();
}
});

 

function uploadFile(msg){
if(msg!=error){
$("#imgPhoto").attr("src",msg);

}else {
alert("上傳圖片失敗！");
}

後台上傳成功，在iframe頁面調用父頁面方法設定圖片路徑

 PrintWriter out = response.getWriter();

filePathName =serverFile.getName();
out.println("<script>window.parent.uploadFile(‘" + filePathName + "‘)</script>");

 

參考資料：http://perfectlife.iteye.com/blog/396959