首页 > 技术文章 > FileUpload控件预览图片

zzp0320 2017-07-18 11:15 原文

HTML代码:

<tr>
           <td class="auto-style1">上传图片:</td>
           <td>
                   <asp:FileUpload ID="FileUpload1" runat="server" onchange="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>';
}
}

 

推荐阅读