asp.net 使用FileUpload控制元件上傳並顯示圖片
在專案中經常會遇到上傳圖片,在點選儲存按鈕向資料庫提交資料之前,讓圖片顯示在Image控制元件中,方法如下:
<tr>
<td width="20%" align="right" class="tablesingletdlable">
<asp:Label ID="Label6" runat="server" Text="書圖"></asp:Label>
</td>
<td align="left" width="80%" class="tablesingletdinput" colspan="3">
<asp:Image ID="tbtmpPic" runat="server" CssClass="inputc" Height="200px" Width="170px" />
<asp:HiddenField ID="allFileSize" runat="server" Value="0" />
<div id="msg" runat="server" style="text-align: center">
<fieldset>
<legend>圖 片 選 擇 </legend>請選擇圖片:<asp:FileUpload ID="FileUpload1" runat="server" />
<a class="zInputBtn">
<asp:Button ID="btnConfirm" runat="server" Text="新增書籍圖片" CssClass="inputButton" OnClick="btnConfirm_Click" />
</a>
</fieldset>
</div>
</td>
</tr>
---------------------------------------------------
/// <summary>
/// 圖片選擇確定
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnConfirm_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string guid = Guid.NewGuid().ToString();
string newFileName = folder + "\\" + guid + Path.GetExtension(FileUpload1.FileName);
url = Page.ResolveUrl("~") + "Admin/BookImages/" + guid + Path.GetExtension(FileUpload1.FileName);
int totalFileSize = Int32.Parse(allFileSize.Value);
int fileSize = FileUpload1.PostedFile.ContentLength;
//此處也可以限制單個檔案的大小
if (totalFileSize + fileSize > 1024 * 1024 * 100)
{
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "", @"<script>alert('總上傳的檔案超過了大小設定 1024 * 1024 !')</script>");
return;
}
FileUpload1.SaveAs(newFileName);
ListItem item = new ListItem();
item.Text = FileUpload1.FileName;
item.Value = url + "|" + newFileName;
tbtmpPic.Style["display"] = "";
tbtmpPic.ImageUrl = url;
totalFileSize += fileSize;
allFileSize.Value = totalFileSize.ToString();
}
}
相關文章
- Django實現圖片上傳並前端頁面顯示Django前端
- 圖片上傳顯示替換
- React圖片上傳元件react-fileupload的使用方法React元件
- vxe-upload 上傳圖片顯示進度
- django 實現圖片上傳和顯示操作Django
- 上傳封面圖片前臺不顯示 Picture檔案裡可以看到上傳的圖片
- asp:FileUpload 上次圖片
- QLabel顯示圖片 ,並實現縮放
- 使用jpeg圖片庫,顯示圖片並簡單實現LCD的觸屏功能
- Laravel 使用 FastDFS 上傳圖片LaravelAST
- 利用vue-cropper剪裁圖片並上傳Vue
- 圖片裁剪並上傳到阿里雲oss阿里
- 移動端使用localResizeIMG4壓縮圖片並上傳
- psd圖片不能在網頁上顯示網頁
- element上傳圖片元件使用方法|圖片回顯|格式轉換base64元件
- Java實現圖片上傳到伺服器,並把上傳的圖片讀取出來Java伺服器
- 使用 HTML5 Canvas 實現圓形圖片裁剪並上傳HTMLCanvas
- 請問帝國CMS圖片上傳後顯示亂碼怎麼辦
- El-Upload元件上傳圖片並新增水印元件
- 上傳圖片
- 鴻蒙跳轉到相簿或者檔案選擇圖片並顯示到Image控制元件中鴻蒙控制元件
- mfc+最大最小化視窗+控制元件變化+圖片(視訊幀)顯示在控制元件上控制元件
- SAP UI5 圖片顯示控制元件 Avatar 的使用方式介紹試讀版UI控制元件
- ASP.NET Web Pages基礎知識---Razor 例項:顯示圖片ASP.NETWeb
- Golang pprof 結果使用 graphviz 圖片化顯示Golang
- electron上傳圖片
- 上傳圖片jsJS
- 裁剪上傳圖片
- 圖片上傳及圖片處理
- java,springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地,壓縮圖片上傳(有些圖片會失真),原圖上傳JavaSpring Boot伺服器
- C# Windowsform控制元件picturebox只顯示一部分圖片,只顯示左上角一部分圖片C#WindowsORM控制元件
- cropper,圖片剪輯上傳工具的使用
- vue+element 將圖片壓縮並轉換成base64上傳圖片Vue
- Simple WPF: S3實現MINIO大檔案上傳並顯示上傳進度S3
- 多圖片formpost上傳ORM
- spring boot 圖片上傳Spring Boot
- 測試圖片上傳
- input file圖片上傳
- 本地Markdown上傳圖片