在網頁中經常需要上傳圖片並進行預覽，大多數情況下是通過ajax將圖片上傳到後端，然後反饋上傳狀態和結果給前端進行預覽。這裡我們介紹三種快速的上傳圖片預覽方法，不需要後端參與也可快速進行圖片預覽。
FileReader文件
Window.URL文件

1.獲取File物件

兩種預覽方法均需要先獲取<input type='file'>控制元件的file物件

var fileinput = Document.getElementById('id');
var File = fileinput.files[0];  //獲取第一個File物件
//當上傳檔案為多個時，通過循壞獲取多個File物件
 

var fileList = fileinput.files;
        for( var i = 0 ; i < fileList.length ; i++ ){
            console.log(fileList[i]);
        }

屬性

File.name  //返回當前 File 物件所引用檔案的名字，只讀 
File.size  //返回檔案的大小，只讀，單位為位元組
File.type  //返回檔案型別，例如 PNG 影象是 "image/png"，只讀
File.lastModifiedDate //返回當前檔案的最後修改日期,如果無法獲取到檔案的最後修改日期,則使用當前日期來替代，只讀
 


//可以根據以上屬性設定上傳檔案型別以及最大上傳檔案大小

2.FileReader

構造物件

if (window.FileReader){    //檢測瀏覽器是否支援
    var reader = new FileReader();  //構造FileReader物件
}else{
    //不支援則只有使用其他圖片預覽方法
}

方法

reader.readAsArrayBuffer(File);  //將檔案讀取為ArrayBuffer物件格式
reader.readAsBinaryString(File); //將檔案讀取為二進位制資料
reader.readAsDataURL(File
 
);   //將檔案讀取後返回其URL，適合圖片預覽
reader.readAsText(File,encoding='UTF-8') //將檔案讀取為文字形式，可指定編碼方式
reader.abort（）  //終止讀取操作

事件

reader.onloadstart = function(){
    //檔案開始讀取時觸發
};

reader.onprogress = function(event){
    //檔案讀取過程時定時觸發
    //已讀取檔案大小: event.loaded
    //檔案總大小: event.total
    //可利用以上兩個引數和HTML的<progress>標籤搭配，製作一個讀取進度條
};

reader.onabort = function(){
    //當檔案讀取被中止時觸發
};

reader.onerror = function(){
    //當讀取操作發生錯誤時觸發
};

reader.onload = function(){
    //當讀取操作成功完成時觸發
};

reader.onloadend = function(){
    //當讀取操作完成時呼叫,不管是成功還是失敗.該處理程式在onload或者onerror之後呼叫.
};

屬性

reader.error  //在讀取檔案時發生的錯誤. 只讀

reader.readyState  //表明FileReader物件的當前狀態。包含以下三種狀態，0：還沒有載入任何資料；1：資料正在被載入；2：已完成全部的讀取請求

reader.result   //讀取到的檔案內容.這個屬性只在讀取操作完成之後才有效,並且資料的格式取決於讀取操作是由哪個方法發起的. 只讀.

預覽方法

使用readAsDataURL（）方法，讀取完成後，result屬性中即儲存著圖片的URL，賦值給<img>的src屬性即可

3.Window.URL

獲取URL物件

var URL = window.URL || window.webkitURL;

建立圖片URL

var imageURL = URL.createObjectURL(File);
//建立後即可直接使用該URL，賦值給<img>的src屬性

釋放URL

 URL.revokeObjectURL(imageURL) 

4.IE濾鏡

try
{
    fileobj.select();
    fileobj.blur();
    var path = document.selection.createRange().text;
    var pic = document.getElementById("person_pic");   //獲取img標籤
    pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";    //濾鏡預覽圖片
    pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';                 //設定img的src為base64編碼的透明圖片，要不會顯示紅xx
}
catch(e)
{
    alert(e+"\n"+"如果錯誤為：Error:Automation 伺服器不能建立物件；"+"\n"+"請按以下方法配置瀏覽器："+"\n"+"請開啟【Internet選項-安全-Internet-自定義級別-ActiveX控制元件和外掛-對未標記為可安全執行指令碼的ActiveX控制元件初始化並執行指令碼（不安全）-點選啟用-確定】");
}

5.使用例子

$(document).on("change","input[type=file]",function(){ //上傳頭像圖片預覽，未來元素繫結法
    var fileobj = $(this)[0];
    if (fileobj && fileobj.files){   //是否能獲取file物件
        var headimage = fileobj.files[0]
        if (headimage.type.split('/')[0] == 'image'){
            if(headimage.size/1024/1024 <= 1 ){
                    $('#pic_name').text(headimage.name);
                    if (typeof FileReader != 'undefined'){
                        var reader = new FileReader();
                        reader.readAsDataURL(headimage);
                        reader.onload = function(){
                            var dataURL = reader.result;
                            $("#person_pic").attr("src",dataURL);
                        };
                    }else{
                        var URL = window.URL || window.webkitURL;
                        var imageURL = URL.createObjectURL(headimage);
                        $("#person_pic").attr("src",imageURL);
                    } 
            }else{
                alert("圖片大小必須小於1M")
                fileobj.value = '';
                $('#pic_name').text("上傳圖片失敗");
            }
        }else{
            alert("上傳檔案必須為圖片格式");
            fileobj.value = '';
            $('#pic_name').text("上傳圖片失敗");
        }
    }else{    //不能獲取file物件，一般都是低版本的IE,使用濾鏡
        try{
            fileobj.select();
            fileobj.blur();
            var path = document.selection.createRange().text;    
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            var fileSize = fso.GetFile(path).size;
            if (fileSize/1024/1024 >= 1){        //檢查圖片大小
                var file_clone = fileobj.cloneNode(false);
                fileobj.parentNode.replaceChild(file_clone,fileobj);    //由於低版本IE無法修改input file的值，直接克隆一個替換原來的實現清空操作
                $('#pic_name').text("上傳圖片失敗");
                alert("圖片大小必須小於1M");
            }else{                                //預覽圖片
                var text_list = $("input[type=file]").val().split("\\");
                var pic_name = text_list[text_list.length-1];
                $('#pic_name').text(pic_name);
                var pic = document.getElementById("person_pic");
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";    //濾鏡預覽圖片
                pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';                 //設定img的src為base64編碼的透明圖片，要不會顯示紅xx
            }
        }catch(e){
            alert(e+"\n"+"如果錯誤為：Error:Automation 伺服器不能建立物件；"+"\n"+"請按以下方法配置瀏覽器："+"\n"+"請開啟【Internet選項-安全-Internet-自定義級別-ActiveX控制元件和外掛-對未標記為可安全執行指令碼的ActiveX控制元件初始化並執行指令碼（不安全）-點選啟用-確定】");
        }

    }
});