無刷新上傳功能如何實現？手寫無刷新上傳要用到兩個東西，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 </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 ; } }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
