Question

更具体地说，我想使用一个带有一个或多个用于图像的文件输入字段的表单。当这些字段发生变化时，我想在将数据发送到服务器之前显示相关图像的预览。

我尝试了很多javascript方法，但我总是遇到安全错误。我不介意使用java或flash，只要解决方案适合那些没有它们的用户。（他们不会得到预览，他们也不会讨厌'安装这个东西'。）

有没有人以简单，可重复使用的方式完成此任务？

P.S。我知道有一个沙箱，但沙箱是否必须在一个黑暗的，锁着的房间里，所有的窗户都被涂黑了？

Answer 1

不需要花哨的东西。您只需要createObjectURL函数，它可以创建一个可以用作图像src的URL，并且可以直接来自本地文件。

假设您使用文件输入元素（<input type="file" />）从用户的计算机中选择了几张图像。以下是为图像文件创建预览的方法：

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

function myUploadOnChangeFunction() {
    if(this.files.length) {
        for(var i in this.files) {
            var src = createObjectURL(this.files[i]);
            var image = new Image();
            image.src = src;
            // Do whatever you want with your image, it's just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}

Answer 2

第一步是找出图像路径。允许JavaScript查询文件名/路径的上传控件，但是（出于安全原因）各种浏览器向JS引擎显示的内容与向用户显示的不同 - 它们往往保持文件名完整，因此您至少可以验证它的扩展名，但你可能会在文件名前加c:\fake_path\或类似混淆的东西。在各种浏览器上尝试这一点可以让您了解作为真实路径返回的内容，以及伪造的内容和位置。

第二步是显示图像。如果您知道自己的路径，则可以通过带有img源网址的file://标记显示本地图片（如果用户的浏览器允许file://方案）。（默认情况下，Firefox不会。）因此，如果您可以让用户告诉您图像的完整路径是什么，您至少可以尝试加载它。

Answer 3

Here's a jQuery + PHP script用于上传图片并进行预览。

Answer 4

我只见过这样做的Java小程序，例如Facebook上的图片上传小程序。 Java方法的缺点是在运行之前会提示用户信任applet，这是一种烦恼，但这允许applet呈现带有图像预览的文件浏览器或做更多有趣的事情，例如允许用户上传整个目录。

Answer 5

你可以尝试这种方法，虽然它似乎不适用于IE。

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

编码简单快捷。

我把代码放在这里，以防源死：

脚本：

    <!-- Assume jQuery is loaded -->
    <script>
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#img_prev')
              .attr('src', e.target.result)
              .width(150)
              .height(200);
          };

          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>

在HTML中：

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
      <input type='file' onchange="readURL(this);" />
      <img id="img_prev" src="#" alt="your image" />
    </body>

Answer 6

出于安全目的，JavaScript无权访问本地文件系统。

是否可以在通过表单上传之前预览本地图像？

6 个答案: