JavaScript實現無刷新上傳預覽圖片功能

來源：懂視網責編：小采時間：2020-11-27 22:33:28

JavaScript實現無刷新上傳預覽圖片功能

JavaScript實現無刷新上傳預覽圖片功能:無刷新上傳功能如何實現？手寫無刷新上傳要用到兩個東西，FormData和FileReader。 FileReader 用于圖片瀏覽。 FormData 用于ajax請求。 html代碼先創建表單跟圖片的容器 <form enctype=multipart/form-data id=oF

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現無刷新上傳預覽圖片功能:無刷新上傳功能如何實現？手寫無刷新上傳要用到兩個東西，FormData和FileReader。 FileReader 用于圖片瀏覽。 FormData 用于ajax請求。 html代碼先創建表單跟圖片的容器 <form enctype=multipart/form-data id=oF

無刷新上傳功能如何實現？手寫無刷新上傳要用到兩個東西，FormData和FileReader。

FileReader 用于圖片瀏覽。

FormData 用于ajax請求。

html代碼

先創建表單跟圖片的容器

 <form enctype="multipart/form-data" id="oForm">
 <input type="file" name="file" id="file" onchange="readAsDataURL()" />
 <input type="button" value="提交" onclick="doUpload()" />
 </form>
 <div>
 <img alt="" id="img"/>
 </div>

javascript代碼

FormData:

通過FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同。

在這里FormData對象是用來獲取form表單內的所有input數據，然后使用ajax請求發送數據到指定url，就不會出現表單提交時跳轉的情況。

 function doUpload() { 
 var formData = new FormData($( "#oForm" )[0]); 
 console.log(formData); 
 $.ajax({ 
 url: 'pp', 
 type: 'POST', 
 data: formData, 
 async: false, 
 cache: false, 
 contentType: false, 
 processData: false, 
 success: function (returndata) { 
 console.log(returndata); 
 }, 
 error: function (returndata) { 
 console.log(returndata); 
 } 
 }); 
 }

FileReader:

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

在這里FileReader對象是用來獲取file上來的圖片并把圖片轉換成Data URL形式顯示在事先創建的容器中。

function readAsDataURL(){
 //檢驗是否為圖像文件
 var file = document.getElementById("file").files[0];
 if(!/image\/\w+/.test(file.type)){
 alert("看清楚，這個需要圖片！");

 return false;
 }else{
 var reader = new FileReader();
 //將文件以Data URL形式讀入頁面
 reader.readAsDataURL(file);
 reader.onload=function(e){
 var result=document.getElementById("img");
 //顯示文件
 result.src= this.result ;
 }
 }
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實現無刷新上傳預覽圖片功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片上傳功能

熱門焦點

JavaScript實現無刷新上傳預覽圖片功能

JavaScript實現無刷新上傳預覽圖片功能

JavaScript實現無刷新上傳預覽圖片功能

最新推薦

猜你喜歡

熱門推薦