FileUpload控件预览图片

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的展示好一些，兼容性要好。