FileUpload控件實現單按鈕圖片自動上傳并帶預覽顯示

?

1.實現原理： FileUpload控件默認不支持服務端的ONCHANGE事件，此時用一種變通的方法借用客戶端的onchange事件，調用__doPostBack方法來用LinkButton的OnClick事件模擬一個事件觸發的過程，可以在LinkButton的OnClick事件中進行圖片的上傳，和預覽加載。 2.關鍵代碼： ? ???頁面代碼： 1 <asp:FileUpload ID="fuPhoto" οnchange="javascript:__doPostBack('lbtnUpload','')" runat="server" ToolTip="選擇圖片" ForeColor="White" Width="68"/> 2 <asp:LinkButton ID="lbtnUpload" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton> 3 <img id="img" runat="server" src="" />

? ?后臺代碼：

1 /// <summary> 2 /// 自動上傳事件 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 protected void lbUploadPhoto_Click(object sender, EventArgs e) 7 { 8 fileUpload(); 9 } 10 //從控件上傳文件 11 public void fileUpload() 12 { 13 if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > 0) 14 { 15 //1. 驗證文件格式 16 string ext = System.IO.Path.GetExtension(fuPhoto.PostedFile.FileName).ToLower(); 17 if (ext != ".jpg" && ext != ".gif"&&ext!=".png") 18 { 19 Response.Write("文件非法！"); 20 return; 21 } 22 string savePath = Server.MapPath("~/upload/");//指定上傳文件在服務器上的保存路徑 23 //2. 檢查服務器上是否存在這個物理路徑，如果不存在則創建 24 if (!System.IO.Directory.Exists(savePath)) 25 { 26 System.IO.Directory.CreateDirectory(savePath); 27 } 28 Random random = new Random(DateTime.Now.Millisecond); 29 string fileName = DateTime.Now.ToString("yyMMddhhmmss") + random.Next(10000)+ext; 30 string path = savePath + fileName; 31 fuPhoto.PostedFile.SaveAs(path); 32 this.img1.Src = "upload/" + fileName; 33 } 34 else 35 { 36 //do some thing; 37 } 38 }

?

轉載于:https://www.cnblogs.com/xyyt/p/3978562.html

總結

以上是生活随笔為你收集整理的FileUpload控件实现单按钮图片自动上传并带预览显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。