如何在上传之前使用JavaScript或jQuery来预览图像？ [英] How to preview a image before upload using JavaScript or jquery?

问题描述

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

JS

 函数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 $ b

 < img id =prevImagesrc =alt =width =313height =315/> 
< input name =photo1id =photo1type =fileonchange =setImage（this）; value =class =inputsize =17/> 
  

这段代码在Safari，Firefox 3,4,5中正常工作，但在Google Chrome中不起作用12美元或更高，IE 8,9美元。

所以请告诉我有关这个问题的任何解决方案？

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

如果您有此代码或全新代码的解决方案，请告诉我找到了完整的解决方案。 / php-jquery-upload-image-and-preview-display-instant> stack post ，这里是解决方案。

I just need to display the image chosen (Browse) by the user before the upload. For this purpose i am using this code:

JS

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"/>

This code working fine in Safari, Firefox 3,4,5 but doesn't work in Google Chrome 12 or higher and IE 8, 9.

So please tell me any solution regarding this issues?

I already tried other solution given on this website but they are also not working in all major browsers.

if you have a solution for this code or a completely new code then please tell me.

解决方案

I find a complete solution from another stack post, here is the solution.

这篇关于如何在上传之前使用JavaScript或jQuery来预览图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！