1. 在 HTML 里定义一个 input 元素,我们指定 accept="image/*" 属性来实现默认上传image格式的文件,div用来预览图片。
2. 选择 input 并且给该元素添加 change 事件,即 input 的值改变时运行我们的 update 函数
const fileEle = document
.getElementsByClassName("test-file")[0],
imgBox = document
.getElementsByClassName("pre-file")[0];
fileEle.addEventListener("change", update);
3. 这里通过 this.files 来获得 input 选择的文件列表,在 chrome 浏览器下通过toString.call(files) 显示 [object FileList] 即 files 是 FileList 对象,使用 for of 来遍历该对象
function update(e){
const files = this.files;
imgBox.innerHTML = "";
for (const v of files) {
readFile(v);
}
}
4. 通过 toString.call(v) 方法得到遍历出来的是 File ,我们可以通过 FileReader 对象来读取 File 对象, FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。FileReader 对象通过 readAsDataURL 方法将文件读取为DataURL,result就是文件的base64字符。直接把 base 赋值给 img 的 src 属性就能实现图片的预览了。
function readFile(v) {
const fr = new FileReader();
fr.onload = e => {
const base = e.target.result,
img = document.createElement("img");
img.src = base;
"width: 200px;max-height: 200x;";
imgBox.appendChild(img);
toBlob(base);
}
fr.readAsDataURL(v);
}
5. 现在预览实现了,我们还需要把文件上传到服务器,我们把 base 转换成 blob 对象类型进行上传
function toBlob(base) {
let blob = null;
const code =window.atob(
base.split(",")[1]),
aBuffer =new window.ArrayBuffer(
code.length),
uBuffer =new window.Uint8Array(
aBuffer);
const l =code.length;
for(let i = 0, len = l; i
uBuffer[i] = code.charCodeAt(i) & 0xff ;
}
blob = new Blob([uBuffer]);
console.error(blob);
}
Leither公会
▼
干货好文,请继续关注
▼
前端掌握未来
领取专属 10元无门槛券
私享最新 技术干货