javascript實現圖片僞異步上傳

實現邏輯

首先要知道， ajax沒法發送帶有文件的post請求，因此仍是要用同步的方式，可是刷新的時候，咱們不要在原來的頁面刷新，去一個隱藏的iframe裏面刷新，form表單中action正常填寫處理文件上傳的操做。緊接着的target填寫一個隱藏的iframe。 這樣表單提交以後，文件會被上傳，被刷新頁面爲隱藏的iframe，所以用戶看到的效果和ajax處理的效果是同樣的。

dom結構

在這裏有兩個須要注意的地方，一是iframe是隱藏的，對用戶不可見。二是form的target屬性就是iframe的id屬性，必須確保這個地方的一致，不然獲取不到服務器的回傳地址

<form action="#" method="post" enctype="multipart/form-data" target="hidden_frame"  id='upload'>
    <input type="file" name="pic" accept="image/gif;image/jpg;" />
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" style='display:none'></iframe>

圖片預覽

通常在圖片上傳以前，咱們但願用戶能夠預覽到上傳以後的樣子，這裏有兩種處理方式。一個是等圖片上傳成功以後，服務器返回圖片的地址，將圖片顯示，因爲中間的時間差很小，給用戶一種錯覺好像真的是在預覽。第二種方式是在圖片上傳以前，獲取input中的本地圖片地址，而後顯示，因爲是顯示本地的圖片，因此沒有時間差，實現真正的預覽。簡單的邏輯邏輯代碼以下

$("#userHeadImg").change(function(event) {                    
     var file = $(event.target)[0].files[0];
     var src = URL.createObjectURL(file);
     if(file){
        //表示獲取到了圖片
     }else{
        //表示點擊了取消
     }
     //這裏的src就是圖片的地址，將它放在任意一個img標籤的src屬性裏面      
});

開始上傳

在onchange事件裏面促發form的submit事件，上傳圖片

$("#upload").submit();

獲取服務器回傳的圖片url

服務器將地址返回到iframe，iframe會被刷新。使用js監聽iframe的onload，一旦有onload發生，就表示服務器回傳了信息

var imgsrc=$(this).contents().find("pre").text();

增長上傳文件類型限制

accept="image/gif;image/jpg;"

思考

這種方式對於單張圖片上傳沒有問題，若是是多張，該怎樣優化?