在上傳之前預覽圖像時獲取通過標識的圖像

Question

我使用下面的腳本在上傳之前預覽圖像。 我有這樣的HTML：

<div> 
    <img id="image" src="#"> 
</div> 

<input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);"> 

和JS是這樣的： （我用jquery-2.0.0.min.js）

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#image').attr('src', e.target.result); 
       }; 

       reader.readAsDataURL(input.files[0]); 
      var image = document.getElementById('image'); 
      console.log(image); 

     }} 

我的問題是這樣的：當我下載我之前可以顯示圖像使用此腳本」 t得到圖像var image = document.getElementById('image');和控制檯日誌顯示此：<img src="#" id="image">。上傳前如何顯示圖片？

Answer 1

​​.readAsDataURL()方法異步返回結果。包括var image = document.getElementById('image');console.log(image);或console.log($("#image")[0])內FileReaderonload事件處理程序。

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

FileReader.readyState只讀

一個數字，指示FileReader的狀態。這是以下之一：

EMPTY 0尚未加載任何數據。

LOADING 1當前正在加載數據。

完成2整個讀取請求已完成。

function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     // do stuff when `.readAsDataURL()` completes 
 
     var image = document.getElementById("image"); 
 
     image.src = e.target.result; 
 
     console.log(image, e.target.result, reader.DONE); 
 
    }; 
 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img id="image" src="#" /> 
 
</div> 
 

 
<input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);">