如何在Asp.Net上传之前显示图像的预览 [英] How to display Preview of an image before upload in Asp.Net

问题描述

嗨



我正在使用FileUpload控件上传图片。当用户选择图像时，我正在显示图像的预览。我使用了以下javascript函数来显示它。

  function  previewImage （input，elem）{
  //   alert（input.files.length） 
  if （input.files&& input.files [ 0 ]）{
  var  reader =  new  FileReader（）; 
 reader.onload =  function （e）{
 $（' ＃' + elem）.attr（'  src'，e.target.result）; 
} 
 reader.readAsDataURL（input.files [ 0 ]）; 
} 
} 

上述脚本在页面上发生回发并且预览可用之前正常工作。但当发回邮件时，FileUpload会丢失其值。为了避免这种情况，我通过使用以下帖子中给出的解决方案来处理它

如何在PostBack后维护FileUpload控件的状态 [ ^ ]



上述解决方案有效，fileupload在回发后保留其值。但是在回发后预览不起作用。我使用以下代码调用javascript函数

 ScriptManager.RegisterStartupScript（ this  .Page，此 .GetType（），  PreView，< span class =code-string>  previewImage（ + fu.ID +  ， + imgid +  ）;， true ）; 

函数被调用但它是无法获取文件。当我试图获得文件长度它显示0.出了什么问题？我怎么解决这个问题？

解决方案

（' ＃ ' + elem）.attr（' src'，e.target.result）;
}
reader.readAsDataURL（input.files [ 0 ]）;
}
}

上述脚本在页面上发生回发并且预览可用之前正常工作。但当发回邮件时，FileUpload会丢失其值。为了避免这种情况，我通过使用以下帖子中给出的解决方案来处理它

如何在PostBack后维护FileUpload控件的状态 [ ^ ]



上述解决方案有效，fileupload在回发后保留其值。但是在回发后预览不起作用。我使用以下代码调用javascript函数

 ScriptManager.RegisterStartupScript（ this  .Page，此 .GetType（），  PreView，< span class =code-string>  previewImage（ + fu.ID +  ， + imgid +  ）;， true ）; 

函数被调用但它是无法获取文件。当我试图获得文件长度它显示0.出了什么问题？我如何解决这个问题？

如果客户端支持html5，你可以使用文件api



http://www.html5rocks.com/en/tutorials/file/dndfiles/ [ ^ ]



除此之外（也许是Flash等），无法从光盘读取图像以显示预览。

尝试这些链接 -

使用C＃在ASP.NET Image Control中预览图像 [ ^ ]

在Uploa之前预览图像ding在ASP.Net中使用jQuery [ ^ ]

在ASP.Net中使用FileUpload控件和jQuery上传之前预览图像 [ ^ ]

Hi

I am using FileUpload control to upload an image. I am displaying preview of an image when user select an image. I have used following javascript function to display it.

function previewImage(input, elem) {
            //alert(input.files.length)
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#' + elem).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

The above script works fine before postback occurs on the page and preview is available. but when post back occurs FileUpload loses its value. To avoid it I have handle it by using solution given in following post
How to Maintain FileUpload Control’s State after PostBack[^]

The above solution works and fileupload retains its value after postback. But Preview is not working after postback. I am calling the javascript function using following code

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "PreView", "previewImage(" + fu.ID + "," + imgid + ");", true);

the function gets called but it is not able to get files. When I tried to get file length it shows 0. What went wrong? How can I resolved this ?

解决方案

('#' + elem).attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }

The above script works fine before postback occurs on the page and preview is available. but when post back occurs FileUpload loses its value. To avoid it I have handle it by using solution given in following post
How to Maintain FileUpload Control’s State after PostBack[^]

The above solution works and fileupload retains its value after postback. But Preview is not working after postback. I am calling the javascript function using following code

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "PreView", "previewImage(" + fu.ID + "," + imgid + ");", true);

the function gets called but it is not able to get files. When I tried to get file length it shows 0. What went wrong? How can I resolved this ?

You can use the file api if the client supports html5

http://www.html5rocks.com/en/tutorials/file/dndfiles/[^]

Other than that (and maybe Flash etc) there is no way of reading the image from the disc to show a preview.

Try these links -
Previewing Image in ASP.NET Image Control using C#[^]
Preview Image Before Uploading Using jQuery in ASP.Net[^]
Preview image before upload using FileUpload control and jQuery in ASP.Net[^]

这篇关于如何在Asp.Net上传之前显示图像的预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！