本文利用html5提供的File API实现了图片预览和上传功能。这里先看代码,然后再解释要点,为了方便,将html和javascript代码写在同一个文件中。
action="upload" οnsubmit="return check();">
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;
}
判断是否是图片类型
在显示预览和上传图片之前,都需要先判断文件类型。判断方法为文件的type属性是否以"image/"开头
file.type.indexOf("image/") >= 0
清除预览和文件选择框
当文件不是图片类型或者用户选择取消时,需要清除预览和文件选择框。
fileDom.value = "";
previewDom.src = "";
注意要将previewDom.src设置为空字符串,如果设置为null或undefined都会显示裂开的图片以表示图片不存在。
设置fileDom.value不会触发change事件监听,因为出于安全考虑,事件监听只会在用户操作的时候触发。