Js FileReader图片加载

FileReader

 FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

方法

方法定义	描述
abort():void	终止文件读取操作
readAsArrayBuffer(file):void	异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void	异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void	异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void	异步按字符读取文件内容，结果用字符串形式表示

 

事件

事件名称	描述
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloadend	当读取操作完成时调用,不管是成功还是失败
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

 

读取方式(以读取图片为例)

readAsDataURL

 

 readAsText

 

readAsBinaryString

 

readAsArrayBuffer

 

 

例子

 Html

　　　　　　　　　　　　　　　　　　　　　　　　 <div class="row">
                                            <div class="col-md-2" style="padding:0;">
                                                <a href="#" class="thumbnail" style="text-align:center;">
                                                    <img id="testimg" src="~/Content/kittens.jpg" />
                                                    <span >asdasdas</span>
                                                </a>
                                            </div>
                                            
                                            <div class="col-md-2" style="padding:0;">
                                                <input type="file" id="SelectFile" />
                                            </div>
                                        </div>

 

JavaScript

    $("#SelectFile").bind("change", function () {
        var file = document.getElementById('SelectFile').files[0];　　　　//选择的文件对象
        if (file) {
            var reader = new FileReader();　　　　//实例化
            reader.readAsDataURL(file);　　　　　　//加载
            reader.onload = function () {
                var re = this.result;
                alert(file.name);    //'文件'file.name  '大小'file.size  '修改'file.lastModifiedDate     
                $("#testimg").attr("src", re);　　//赋值img
            }
        }
    })