這篇文章介紹了利用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中文網其他相關文章！
