html5读取手机文件上传,HTML5 之 FileReader 方法上传并读取文件

HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 事件

FileReader.onabort 处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror 处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload 处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart 处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend 处理loadend事件。该事件在读取操作结束时(要么成功，要么失败)触发。

FileReader.onprogress 处理progress事件。该事件在读取Blob时触发。

用法

下面分别是上传csv文件和图片文件的两种用法： html部分

上传CSV文件

上传图片

js部分

// 上传csv格式的文件

function uploadfile() {

let reads = new FileReader();

file = document.getElementById('file').files[0];

reads.readAsText(file, 'utf-8');

console.log(reads);

reads.onload = function (e) {

console.log(e)

// document.getElementById('result').innerText = this.result

document.getElementById('result').innerText = e.target.result

};

reads.onloadstart = function(e) {

console.log('onloadstart ---> ', e)

}

reads.onloadend = function(e) {

console.log('onloadend ---> ', e)

}

reads.onprogress = function(e) {

console.log('onprogress ---> ', e)

}

}

// 上传image

function uploadfile2() {

let reads = new FileReader();

file = document.getElementById('file2').files[0];

reads.readAsDataURL(file);

console.log(reads);

reads.onload = function (e) {

document.getElementById('img').src = this.result;

};

}