javascript - 图片上传前预览时通过id获取图片

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

        }}

我的问题是:当我在下载前使用此脚本显示图像时，我无法通过 var image = document.getElementById('image'); 获取图像和控制台日志显示:<img src="#" id="image"> .如何在上传之前获取其中显示的图像？

Answer 1

FileReader() .readAsDataURL() 方法异步返回结果。包括 var image = document.getElementById('image');console.log(image); 或 console.log($("#image")[0])在 FileReader onload 事件处理程序中。

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

FileReader.readyState Read only

A number indicating the state of the FileReader. This is one of the following:

EMPTY 0 No data has been loaded yet.

LOADING 1 Data is currently being loaded.

DONE 2 The entire read request has been completed.

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