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

【问题标题】：is it possible to preview local images before uploading them via a form?是否可以在通过表单上传之前预览本地图像？
【发布时间】：2024-04-17 09:35:01
【问题描述】：

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

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

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

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

【问题讨论】：

您必须先上传图片才能预览图片。我不知道它可以用 Flash 完成，可能用 Java，但我认为这就像试图用锤子杀死一只苍蝇。您可以使用 iframe 进行一些“Ajax 模拟”上传，网上有一些示例，效果很好。
Is there a way to let a user view an image they are about to upload client side before uploading to the server? 的可能重复项
查看这个纯 JavaScript 方法，包括它的答案以及 Ray Nicholus 对最终解决方案的评论：*.com/questions/16430016/…

标签： javascript image upload preview

【解决方案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!
        }
    }
}

【讨论】：

它可以工作，但只能在 Chrome 18、Chromium 18、Firefox 11 中工作。不能在 Safari、IE 9 中工作，而且我没有在 Opera 中检查。 jsfiddle.net/M3kj6/1 我稍后会处理它，看看我是否可以让它在 saf & ie 中工作。无论如何它很有趣...... :)
这是最适合该任务的方式。据此：developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL 它已经在 IE 10 和 Opera 中运行。
唯一的问题是，不要将for(var i in something) 用于数组*.com/questions/500504/…

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

这是安全的白痴。这样的文件无法发送到服务器，那么这是为了什么？我见过许多可以将图形下载到硬盘上的网络游戏，因此游戏运行速度更快。
Thinker，这通常是通过 HTTP 缓存完成的——那是完全不同的事情。 JS 仍然无法访问客户端文件系统上的路径。
除了现在有一个 HTML5 文件 API 可以让您读取正在上传的文件的权限。而且它是安全的

【解决方案4】：

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

【讨论】：

这个是先上传图片再显示。整洁的代码，虽然

【解决方案5】：

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

【讨论】：

【解决方案6】：

您可以尝试这种方法，虽然它似乎不适用于 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>

【讨论】：