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;"
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。