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

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

FileReader在IE中不起作用＆lt; 10。

Answer 1

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

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

Answer 2

为img标签提供一个ID

<img src="#" id ="frame" alt="test" width="128" height="128" />

对于输入代码，请在oninput或onchange上创建一个事件

<input type='file' name='browse' oninput='UpdatePreview()'/>

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

Answer 3

而不是

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

写

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

其中ImageId是您的img标记的ID。

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

3 个答案: