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

【问题标题】：Create live preview of image (before upload it) using JQuery使用 JQuery 创建图像的实时预览（在上传之前）
【发布时间】：2013-06-13 09:28:30
【问题描述】：

我想在将图像上传到服务器之前使用 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

【问题讨论】：

不使用flash或silverlight等第三方扩展是不可能的，如果浏览器不支持FileReader，那么你需要上传它。
您可以通过创建服务器端解决方案来为旧版浏览器创建回退。选择图像后，它会通过 ajax 调用发送到服务器，经过处理、返回并显示为缩略图

标签： javascript jquery

【解决方案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" />

【讨论】：

【解决方案2】：

如果您需要它以获得更好的效果，那么您可以像他们一样使用闪光灯 https://github.com/mailru/FileAPI

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

【讨论】：

【解决方案3】：

代替

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

写

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

ImageId 是您的 img 标签的 ID。

【讨论】：