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
            }
        }
    })