javascript中的图像预览答案

【问题标题】：image preview in javascriptjavascript中的图像预览
【发布时间】：2012-02-28 11:12:03
【问题描述】：

以下代码在 Firefox 和 Chrome 中不起作用，但在 IE 中起作用。谁能告诉我为什么它在浏览器中不起作用，除了带有解决方案的 IE。提前致谢。

<html>
<head>
<script>
function hello()
{
    var a=document.getElementById("upload").value;
    alert(a);
    document.getElementById("previewIMG").src=a;
    document.getElementById("previewIMG").style.display="block";
}

</script>

</head>
<body>
<form name="img"  enctype="multipart/form-data">
<input type="file" name="upload" id="upload" />
<input type="button" name="submit" value="Upload Me Now" onClick="javascript:hello();">
<img id="previewIMG" src="" style="display:none;" />
</form>
</body>
</html>

【问题讨论】：

不允许加载本地资源
欢迎来到 Stack Overflow！ “不起作用”从来都不是一个好的错误描述。请以后做一些调试（什么到底是行不通的？a在IE中包含什么，在FF中包含什么？等等）谢谢！

标签： javascript

【解决方案1】：

这样做有两个问题：

现代浏览器不再公开文件上传中所选文件的完整路径。他们展示了这样的东西：

C:\Fakepath\Filename.txt

不幸的是，这破坏了本地图像预览的可能性。
现代浏览器不允许嵌入本地图像资源，也是出于安全原因，因此即使 1.) 不存在，也因此无法工作。

您必须使用其他方法来获得它，例如一个基于 Flash 的上传器，例如 SWFUpload。这也可以通过 HTML 5 文件 API 再次实现。我想您必须获取图像数据，并将其绘制到作为您的预览图像的画布中。

编辑：This jQuery library 似乎是完美的选择。它提供了一个 API 驱动的上传工具，具有应该在所有现代浏览器（IE 除外）中工作的图像预览功能。谢谢@Shadow Wizard！

【讨论】：

可以使用 HTML5。 See this as well
@Shadow 好点，补充。（这可能不会完全是微不足道的。你必须有一个 Canvas 元素来绘制你的预览......我想知道是否存在可以做到这一点的现成上传小部件。）
@Shadow 甜蜜！考虑把它作为一个答案 - 那个是要走的路，你会得到我的支持
不是我的代码，并且个人不喜欢指向某些外部资源的单行答案...将此添加到您的（已经很好的）答案中以使其更加完整。 :)
我在通过 Javascript 使用 JSP 上传和预览图像时遇到问题。 C://Fakepath/imag.jpg 不允许在 JSP 页面中读写文件。有什么解决办法吗？

【解决方案2】：

在实际将图像上传到服务器之前，您无法预览图像。

让用户选择要上传的图片（例如.jpg文件）
使用 AJAX 将文件上传到服务器
使用 AJAX 显示缩略图

在上面的step 2 中，您可能希望将其上传到服务器上的临时目录，以便您可以在定期清理时将其删除。

【讨论】：