FileUpload控件预览图片-优快云博客

本文介绍了一种使用ASP.NET实现的图片预览方法，通过FileUpload控件选择文件后，利用JavaScript实现img标签和div标签两种方式的图片预览效果，并提供了一段具体的HTML和JS代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<tr>
           <td class="auto-style1">上传图片:</td>
           <td>
                   <asp:FileUpload ID="FileUpload1" runat="server" οnchange="chgImg(this)"/>
                     <div>
                             <img src="" id="Photo" runat="server" style="max-height:80px"/>
                     <div>
                     <div id="preview"></div>
                     <p>图片路径:<asp:Label ID="lalimageUrl" runat="server" Text=""></asp:Label></p>
              </td>
</tr>

JS 代码：

function chgImg(file){

            //img控件预览图片

                      var FileUpload1=$("#FileUpload1").val();

                       $("#Photo").attr("src","file:///" +FileUpload1);
             //div预览图片（兼容模式）
                var prevDiv=document.getElementById('preview');
                 if(file.files && file.files[0]){
                    var reader=new FileReader();
                     reader.onload=function(evt){
                          prevDiv.innerHTML='<img src="'+evt.target.result+'" style="max-height:80px"/>';
}
   reader.readAsDataURL(file.files[0]);
             }
          else
{
              prevDiv.innerHTML='<div class ="img" style="max-height:80px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''+file.value+'\')"></div>';
}
}