浏览器在上传图片之后,我们能够获取到图片的file对象,现在的问题就是让这个图片在浏览器里面显示出来。
思路: file对象转换成base64字符串,然后赋值给img的src即可。 Base64 是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。
我们将file对象转换为base64字符串,需要通过FileReader对象的readAsDataURL来做。
HTML代码
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<button id="fileSelect">Select some files</button>
<div id="preview"> </div>
JS代码
// TIP: 通过ID直接访问该dom元素
// 1, 绑定监听事件
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
}, false);
// 2, 处理获取到的文件对象
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
// 动态生成一个IMG标签
var img = document.createElement("img");
img.classList.add("obj");
// img.file = file; // 不是必须的
img.style.width = '200px';
img.style.height = '100px';
// 假设"preview"就是用来显示内容的div
preview.appendChild(img);
// key codes 将file对象转换为base64编码,然后赋值到img的src属性
var reader = new FileReader();
// 将file对象转换为base64
reader.readAsDataURL(file);
// 闭包
reader.onload = (function(aImg) { return function(e) {
// 打印 e.target.result
aImg.src = e.target.result;
};
})(img);
}
}