html ajax 图片上传,HTML5 FileReader API 与 Ajax上传图片/文件

在日常工作中，引用第三方工具是很常见的事。但是如果为了满足某一个需求，而引用一个巨大的工具，而实际情况却是仅仅使用到这个工具所有功能的冰上一角，这是相当没有规划，没有追求的行为。为了告别Web Uploader(当然这是一个很出色的工具)，我用这篇文章理一理文件读取与上传的相关知识。

文件读取

首先我们需要一个上传的控件。

如果你嫌弃原生的上传控件颜值不优雅，可以自行用模拟一个，监听点击事件并触发一只隐藏的input[file]。

当有文件传入时，会触发onchange事件

fileUploadBtn.addEventListener('change', callback)

此时我们可以拿到上传的file对象，包含了上传文件的相关信息详情点这儿。

var callback = function () {

var file = this.files[0]

}

FileReader API 提供了四种读取文件方式，名字也取得相当语义化。

var reader = new FileReader()

reader.readAsText(file, encoding)

reader.readAsDataURL(file)

reader.readAsBinaryString(file)

reader.readAsArrayBuffer(file)

reader.readyState 记录着reader的状态。

0：new之后

1：执行上述四个读取方法之一后

2：读取完毕，触发onload事件

reader读取文件是异步操作，主要的生命周期Event和常规异步(如Ajax)很相似。

// 上传进度

reader.onprogress = function (ev) {

if (ev.lengthComputable) { // 文件的长度是否可计算

ev.total // 文件总长

ev.loaded // 已加载

}

}

// 上传成功

reader.onload = function () {

reader.result // 文件信息

}

// 上传失败

reader.onerror = function () {

reader.error // 错误信息

}

// 上传完成

reader.loadend = function () {}

// 上传开始

reader.loadstart = function () {}

构造FormData及Ajax上传文件

在前后端分离与Ajax大行其道的今天，我们这一代人多少对 FormData 有些陌生。今天也算是涨见识了。

var callback = function () {

var file = this.files[0]

var xhr = new XMLHttpRequest()

// new一个FormData实例

var formData = new FormData()

// 将file对象添加到FormData实例

formData.append('file', file)

xhr.open('POST', 'url', true)

xhr.send(formData)

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

// doSomeThing(this)

} else {

// error(this)

}

}

}

}