使用FileReader 预览表单上传文件/图片

1、先上一段代码，能够读取文件/图片的代码

//html
<div class="img-container upload"><img class="img-style" src="" alt="" id="show-img"></div>
<input class="fileID" type="file" style="display: none;" id="file" onchange="changepic(this)" name='img'/>

//js
function changepic() {
        var reads= new FileReader();
        f=document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            document.getElementById('show-img').src=this.result;
        };
    };

这段代码足以解决上传完图片想要预览的问题，下边就来详细说一下FileReader对像

2、读取并显示文件

1、使用FileReader对像之前，建议先检查浏览器的支持状态代码如下

if(typeof FileReader == "undefined"){
    alert("当前浏览器不支持FileReader对象");
}else{
    var reader = new FileReader();
}

2、FileReader对像包含5个方法，其中4个用以读取文件，另外一个用以中断读取操作

1、readAsText(Blob,type):将Bolb对象或文件中的数据读取为文本数据。

2、readAsBinaryString(Blob):将Bolb对象或文件中的数据读取为二进制字符串，通常调用该方法将文件提交到服务器端，然后服务器端通过这段字符串存储文件。

3、readAsDataURL(Blob):将Bolb对象或文件中的数据读取为DataURL字符串，该方法就是将数据以一种特殊格式的URL地址形式直接读入页面。

4、readAsArrayBuffer(Blob):将Bolb对象或文件中的数据读取为ArrayBuffer对象。

5、Abort():中断操作。

注意：上述4中方法都包含一个Bolb对象或file对象参数，无论读取成功或失败，都不会返回读取结果，读取结果存储在result结果中。

3、检测读取操作 FileReader对象提供6个事件，用于检测文嘉安读取状态

1、onabort:数据读取中断时触发。

2、onprogress:数据读取中触发。

3、onerror:数据读取出错时触发。

4、onload:数据读取成功完成时触发。

5、onloadstart:数据开始读取时触发。

6、onloadend:数据读取完成时触发，无论成功或者失败。

个人拙见，仅供参考！