這篇文章主要為大家詳細介紹了JavaScript實現無刷新上傳預覽圖片功能,具有一定的參考價值,有興趣的小夥伴們可以參考一下
#無刷新上傳功能如何實現?手寫無刷新上傳要用到兩個東西,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> <p> <img alt="" id="img"/> </p>
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 ; } } }
以上是JavaScript實作不刷新完成圖片的上傳和預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章!