FileUpload控件预览图片
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>'; } }
浙公网安备 33010602011771号