使用FileReader实现图片预览与上传

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公会

▼

干货好文，请继续关注

▼

前端掌握未来