簡單實現圖片上傳預覽

標籤：run   span   change   title   base   script   javascrip   hang   var   

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

<script type="text/javascript" src="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>

簡單實現圖片上傳預覽