Question

以下代码在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>

Answer 1

这有两个问题：

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

C：\ Fakepath \则Filename.txt
遗憾的是，这会破坏本地图像预览的可能性。
现代浏览器不允许嵌入本地图像资源，这也是出于安全考虑，所以即使1.）不存在，也不会因此而起作用。

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

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

Answer 2

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

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

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

javascript中的图像预览

2 个答案: