使用JQuery创建图像的实时预览(在上传之前)

Create live preview of image (before upload it) using JQuery

本文关键字：创建 JQuery 图像 实时 使用      更新时间：2023-09-26

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

My code, js code:

$(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 .

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

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

实时预览可以在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" />

代替

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

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

其中ImageId是您的img标签的ID

相关文章：