通过javascript加载图像答案

【问题标题】：loading an image through javascript通过javascript加载图像
【发布时间】：2011-02-22 08:28:57
【问题描述】：

有没有办法在 javascript 中加载图像的完整二进制文件？
我想要做的是允许用户在上传之前预览图像。
即用户在他的本地驱动器（C:\image.jpg）上选择一个图像，查看它，然后决定上传或取消。
我尝试将源设置为图像路径，但由于它位于 webapplication 项目文件夹之外，因此无法正常工作。
有什么帮助吗？

【问题讨论】：

标签： javascript asp-classic

【解决方案1】：

感谢您的帖子，但我最终在服务器上创建了一个临时文件夹，用于存储使用 ajax 上传的图像。当用户保存数据时，图像被移动到另一个位置，临时文件夹被删除。

【讨论】：

【解决方案2】：

你可以这样做：

<img id="preview" src="" style="display:none;" />

<form>
....
<input type="file" id="file" />
....
</form>

<script type="text/javascript">
  var file = document.getElementById("file");
  var img = document.getElementById("preview");

  file.onchange = function(){
    img.src = file.value;
    img.style.display = 'block';
  };
</script>

【讨论】：

确实如此。 IE 有一个古老的错误，它包含完整的客户端路径，而不仅仅是文件字段值中的文件名。不要让你的代码依赖于错误。

【解决方案3】：

没有简单的方法，你可以做什么：

使用一些 ajax 文件上传器将图像预加载到临时区域，然后让用户决定
使用一些第三方编写的解决方案（例如一些 Flash 组件）

这里也有类似的问题： is it possible to preview local images before uploading them via a form?

【讨论】：

【解决方案4】：

您需要服务器合作才能访问图像二进制数据。如果不将文件上传到服务器，您将无法使用“上传表单”访问文件信息。

但是，您可以执行一些操作，例如告诉用户将图像的源二进制数据粘贴到文本区域或其他内容中，然后您可以使用 JavaScript 加载该二进制数据并显示实际图像。

【讨论】：

【解决方案5】：

这在某些浏览器中通过 HTML5 文件访问 API 可用。这是Firefox documentation for file access。

【讨论】：

【解决方案6】：

正如多次回答的那样，由于安全限制，您不能使用纯 HTML/JavaScript 执行此操作。无论如何，您都需要发送图像。但是，您可以使用 Java Applet 来处理这个问题，因为它完全在客户端计算机上运行并且提供比 HTML/JS 更多的控制。有几个免费和即用型的。 JumpLoader 看起来不错，一些主要网站也使用它。使用 Flash 也应该是可能的，但我不确定哪些提供此功能。检查/试用一些Flash Multi File Uploaders。

【讨论】：

我很难理解反对票，以便在适用的情况下更正/改进答案。是因为我在一个标有 ASP 的问题中提到了 Java Applet 吗？不过，不客气:)