如何在输入类型=“文件”中预览所选图像在弹出使用jQuery？ [英] How to preview selected image in input type="file" in popup using jQuery?

问题描述

在我的代码中，我允许用户上传图片。现在我想在同一个弹出窗口中将此选定图像显示为预览。我怎样才能使用jQuery？

以下是我在弹出窗口中使用的输入类型。

HTML code：

 < input type =filename =uploadNewImage> 
  

解决方案

Demo

HTML：

 < form id =form1runat =server> 
< input type ='file'id =imgInp/> 
< img id =blahsrc =＃alt =您的图片/> 
< / form> 
  

jQuery

  function readURL（input）{
 if（input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 
 reader.onload = function（e）{
 $（'＃blah'）。attr（'src'，e.target.result）; 
} 
 
 reader.readAsDataURL（input.files [0]）; 
 
 
 $ b $（＃imgInp）。change（function（）{
 readURL（this）; 
}）; 
  

参考资料

In my code, I am allowing the user to upload an image. Now I want to show this selected image as a preview in this same popup. How can I do it using jQuery?

The following is the input type I am using in my popup window.

HTML code:

<input type="file" name="uploadNewImage">

解决方案

Demo

HTML:

 <form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>

jQuery

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Reference

这篇关于如何在输入类型=“文件”中预览所选图像在弹出使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！