html图片上传自动清空,html5图片上传

本文利用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事件监听，因为出于安全考虑，事件监听只会在用户操作的时候触发。