如何在使用 JavaScript 或 jquery 上传之前预览图像？答案

【问题标题】：How to preview a image before upload using JavaScript or jquery?如何在使用 JavaScript 或 jquery 上传之前预览图像？
【发布时间】：2011-10-15 19:16:57
【问题描述】：

我只需要在上传之前显示用户选择（浏览）的图像。为此，我正在使用此代码：

function setImage(file) {
    if(document.all)
        document.getElementById('prevImage').src = file.value;
    else
        document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
    if(document.getElementById('prevImage').src.length > 0) 
        document.getElementById('prevImage').style.display = 'block';
}

HTML

<img id="prevImage"  src=""  alt="" width="313" height="315" />
<input name="photo1" id="photo1" type="file" onchange="setImage(this);"  value="" class="input" size="17"/>

此代码在 Safari、Firefox 3、4、5 中运行良好，但在 Google Chrome 12 或更高版本以及 IE 8、9 中无法运行。

那么请告诉我有关此问题的任何解决方案？

我已经尝试过本网站上提供的其他解决方案，但它们也不适用于所有主要浏览器。

如果您有此代码的解决方案或全新的代码，请告诉我。

【问题讨论】：

标签： javascript jquery internet-explorer google-chrome

【解决方案1】：

您也可以使用FileReader，它现在是标准的 Web API。

【讨论】：

【解决方案2】：

我从另一个stack post找到了完整的解决方案，here就是解决方案。

【讨论】：