使用fileReader實現圖片預覽

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，

使用 File 或 Blob 對象指定要讀取的文件或數據。其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,

也能夠來自拖放操做生成的 DataTransfer對象,還能夠是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果.

<input type="file">
<br>
<img src="" alt="">

var fileInput=document.querySelector('input[type=file]');
    var viewImg=document.querySelector('img');
    fileInput.addEventListener('change',function(){
        //console.log(this.files[0]);
        var file=this.files[0];
        var reader=new FileReader();
        reader.addEventListener('load',function(){
            console.log(reader.result);
            viewImg.src=reader.result;
        },false);
        reader.readAsDataURL(file);
    },false);