javascript - 使用 JQuery 创建图像的实时预览（在上传之前）

Question

我想在使用 JQuery 将图像上传到服务器之前创建图像预览。

我的代码，js代码：

$(function(){
    Test = {
        UpdatePreview: function(obj){
          // if IE < 10 doesn't support FileReader
          if(!window.FileReader){
             // don't know how to proceed to assign src to image tag
          } else {
             var reader = new FileReader();
             var target = null;

             reader.onload = function(e) {
              target =  e.target || e.srcElement;
               $("img").prop("src", target.result);
             };
              reader.readAsDataURL(obj.files[0]);
          }
        }
    };
});

我的html：

    <input type='file' name='browse' onchange='Test.UpdatePreview(this)'  />
<br/><br/>
   <img src="#" alt="test" width="128" height="128" />

见jsfiddle：http: //jsfiddle.net/aAuMU/

之后onload，我看到图像的 src（使用 Google 控制台应用程序），它看起来像：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...

这是一种在 javascript 中获取图像基础并分配给图像的方法，以防我使用 IE 作为浏览器？

FileReader在 IE < 10 中不起作用。

Answer 1

可以在 JQUERY 中进行实时预览

我们需要一个 onchange 事件来加载图像。img 标签被赋予id = frame，函数UpdatePreview()在选择图像或文件后立即加载图像。

function UpdatePreview(){
    $('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type='file' name='browse' oninput='UpdatePreview()'/>
<img src="#" id ="frame" alt="test" width="128" height="128" />

Answer 2

如果你需要它来获得很好的效果，那么你可以像他们在 https://github.com/mailru/FileAPI中那样使用 flash

但是当我需要向用户显示图像时，因为我需要让用户选择区域进行裁剪，然后我使用隐藏 iframe 中的表单并将图像上传到服务器并将图像数据 uri 发回，这样我就能够获取数据 uri 并替换图像 src 属性，然后选择区域时，我没有将图像作为文件发送回去，而是作为数据URI发送。在旧浏览器中，这意味着您上传图像两次，但我不想使用 flash，因为在某些情况下，flash 也可能没有安装在那里。

Answer 3

代替

$("img").prop("src", target.result);

写

$("#ImageId").attr("src", target.result);

ImageId您的 img 标签的 ID在哪里。