首页 > 代码库 > 简单实现图片上传预览

简单实现图片上传预览

/*-----Title-----*/

<script type="text/javascript" src="http://www.mamicode.com/Script/jquery-1.4.1.min.js"></script>

/*-----JQuery-----*/

<script type="text/javascript">
$(function () {
$(‘.selectPic‘).change(function () {
$(".previewPic").attr("src", "Content/Loading.gif");
var _file = this.files[0]; //选择上传的文件
var r = new FileReader();
r.readAsDataURL(_file); //Base64
$(r).load(function () {
$(".previewPic").attr("src", this.result);
});
});
});
</script>

/*-----Page-----*/

<div class="selectArea">
<span>选择图片&nbsp;&nbsp;&nbsp;>></span>
<asp:FileUpload ID="FileUpload1" runat="server" accept="image/*" CssClass="selectPic" />
</div>

<div class="previewArea">
<asp:Image runat="server" ID="Image1" CssClass="previewPic" />
</div>

简单实现图片上传预览