
·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 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>
View Code
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>';
}
}
View Code
实现效果,如图所示:

本文是实现了两种预览图片的形式,img控件展示和div展示 希望对大家有所帮助!
ps:建议选择div的展示好一些,兼容性要好。