HTML代码：
<tr>
<tdclass="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>
View Code
JS代码：
function chgImg(file){//img控件预览图片varFileUpload1 = $("#FileUpload1").val();
$("#Photo").attr("src","file:///"+FileUpload1);//div预览图片（兼容模式）varprevDiv = document.getElementById('preview');if(file.files && file.files[0]) {varreader =newFileReader();
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>';
}
}
View Code
实现效果，如图所示：
本文是实现了两种预览图片的形式，img控件展示和div展示 希望对大家有所帮助！
ps:建议选择div的展示好一些，兼容性要好。
