过程
1.通过input标签的的file属性,选择本地的图片文件,并监听onchange事件。
2.创建img标签,添加到本地DOM中。
3.通过FileReader对象监听图片加载的onload事件。
4.readAsDataURL方法将File对象转换成data:URL格式的字符串(base64编码)并赋值给img标签的src属性。
代码示例
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img); // 假设"preview"就是用来显示内容的div
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}