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。

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或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);">

在上传图像之前预览图像时，按ID获取图像

1 个答案: