本文利用html5提供的File API實現(xiàn)了圖片預覽和上傳功能腔寡。這里先看代碼棉饶，然后再解釋要點求橄，為了方便，將html和javascript代碼寫在同一個文件中牙寞。
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
</header>
<body>
<div>
<img id="preview">
</div>
<form id="form" method="POST" enctype="multipart/form-data"
action="upload" onsubmit="return check();">
<input type="file" accept="image/*" name="file" id="file"/>
<input type="submit" value="提交"/>
</form>
<script>
var fileDom = document.getElementById("file");
var previewDom = document.getElementById("preview");
fileDom.addEventListener("change", e=>{
var file = fileDom.files[0];
// check if input contains a valid image file
if (!file || file.type.indexOf("image/") < 0) {
fileDom.value = "";
previewDom.src = "";
return;
}
// use FileReader to load image and show preview of the image
var fileReader = new FileReader();
fileReader.onload = e=>{
previewDom.src = e.target.result;
};
fileReader.readAsDataURL(file);
});
var formDom = document.getElementById("form");
function check() {
var file = fileDom.files[0];
// check if input contains a valid image file
if (!file || file.type.indexOf("image/") < 0) {
return false;
}
return true;
}
</script>
</body>
</html>
判斷是否是圖片類型
在顯示預覽和上傳圖片之前饺鹃，都需要先判斷文件類型。判斷方法為文件的type屬性是否以"image/"開頭
file.type.indexOf("image/") >= 0
清除預覽和文件選擇框
當文件不是圖片類型或者用戶選擇取消時间雀，需要清除預覽和文件選擇框悔详。
fileDom.value = "";
previewDom.src = "";
- 注意要將previewDom.src設置為空字符串，如果設置為null或undefined都會顯示裂開的圖片以表示圖片不存在惹挟。
- 設置fileDom.value不會觸發(fā)change事件監(jiān)聽茄螃，因為出于安全考慮，事件監(jiān)聽只會在用戶操作的時候觸發(fā)连锯。
