在上传之前预览图像时获取通过标识的图像

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);">