HTML5之文件操作全过程（FileReader）

第一步，获取文件

前端中，获取文件必须使用input标签。而获取到这个文件，必须要用代码的方式，体现出来，让你能用代码操作它。这里主要是使用input标签的onchange事件。

<input id='file' type='file' />

var file = document.getELementById('file');
file.onchange = function(e){
    var files = e.target.files;
    //这个files就是获取的file文件的一个数组。之后你可以使用任何方式来操作它。
}

前端在读取到files数组之后，可以对得到的文件一些属性进行读取。这些属性分别是：name、size、type、lastModifiedDate。

var file = files[0];//比如这个file是图片
if(file.size > 5000){
    //处理压缩操作
}

第二步，读取文件（FileReader）

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

1.检测浏览器对FileReader的支持

if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}else {
    alert("Not supported by your browser!");
}

2. FileReader常用的读取文件的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在FileReader监听的读取文件事件的回调函数的result属性中。

• abort： 中断读取文件。
• readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
• readAsBinaryString：该方法将文件读取为二进制字符串 ，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
• readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案 。这里的小文件通常是指图像与 html 等格式的文件。

3. 监听处理文件读取事件（监听文件读取，回调函数返回文件读取结果）

• onabort 中断时触发
• onerror 出错时触发
• onload 文件读取成功完成时触发
• onloadend 读取完成触发，无论成功或失败
• onloadstart 读取开始时触发
• onprogress 读取中

监听事件使用案例

var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {                 
	var body = document.querySelector('body');
	var link = document.createElement('a');
	link.download = filename;
	link.href = e.target.result;         //读取文件成功后返回的文件链接Data URL
	link.style.display = 'none';
	body.appendChild(link);  
	link.click();
	body.removeChild(link);
}

读取文件进度条，通过下面的代码实现

<form>
    <fieldset>
        <legend>分度读取文件：</legend>
        <input type="file" id="File" />
        <input type="button" value="中断" id="Abort" />
        <p>
            <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>

var h = {
    init: function() {
        var me = this;
         
        document.getElementById('File').onchange = me.fileHandler;
        document.getElementById('Abort').onclick = me.abortHandler;
         
        me.status = document.getElementById('Status');
        me.progress = document.getElementById('Progress');
        me.percent = document.getElementById('Percent');
         
        me.loaded = 0;
        //每次读取1M
        me.step = 1024 * 1024;
        me.times = 0;
    },
    fileHandler: function(e) {
        var me = h;
         
        var file = me.file = this.files[0];
         
        var reader = me.reader = new FileReader();
         
        //
        me.total = file.size;
         
        reader.onloadstart = me.onLoadStart;
        reader.onprogress = me.onProgress;
        reader.onabort = me.onAbort;
        reader.onerror = me.onerror;
        reader.onload = me.onLoad;
        reader.onloadend = me.onLoadEnd;
        //读取第一块
        me.readBlob(file, 0);
    },
    onLoadStart: function() {
        var me = h;
    },
    onProgress: function(e) {
        var me = h;
         
        me.loaded += e.loaded;
        //更新进度条
        me.progress.value = (me.loaded / me.total) * 100;
    },
    onAbort: function() {
        var me = h;
    },
    onError: function() {
        var me = h;
         
    },
    onLoad: function() {
        var me = h;
 
        if(me.loaded < me.total) {
            me.readBlob(me.loaded);
        } else {
            me.loaded = me.total;
        }
    },
    onLoadEnd: function() {
        var me = h;
         
    },
    readBlob: function(start) {
        var me = h;
         
        var blob,
            file = me.file;
         
        me.times += 1;
         
        if(file.webkitSlice) {
            blob = file.webkitSlice(start, start + me.step + 1);
        } else if(file.mozSlice) {
            blob = file.mozSlice(start, start + me.step + 1);
        }
         
        me.reader.readAsText(blob);
    },
    abortHandler: function() {
        var me = h;
         
        if(me.reader) {
            me.reader.abort();
        }
    }
};
 
h.init();

转载链接 https://blog.csdn.net/jackfrued/article/details/8967667
转载链接 https://blog.csdn.net/mapbar_front/article/details/78632928