本文利用html5提供的File API实现了图片预览和上传功能。这里先看代码，然后再解释要点，为了方便，将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不会触发change事件监听，因为出于安全考虑，事件监听只会在用户操作的时候触发。
