23

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

我尝试了许多 javascript 方法，但我总是遇到安全错误。我不介意使用 java 或 flash，只要解决方案对于那些没有它们的用户可以优雅地降级。（他们不会得到预览，也不会得到恼人的“安装这个东西”。）

有没有人以一种简单、可重复使用的方式做到这一点？

PS我知道有一个沙箱，但沙箱必须在一个黑暗的、上锁的房间里，所有的窗户都涂黑了吗？

4

6 回答 6

31

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

假设您使用文件输入元素 ( <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!
        }
    }
}
于 2011-10-03T16:17:46.473 回答
1

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

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

于 2009-05-28T18:43:40.630 回答
0

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

于 2009-05-28T18:33:46.063 回答
0

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

于 2009-05-28T18:47:50.527 回答
0

这是一个用于上传图像并进行预览的 jQuery + PHP 脚本。

于 2009-05-28T17:39:33.143 回答
0

您可以尝试这种方法，尽管它似乎不适用于 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>
于 2015-02-16T09:27:27.713 回答