Xem trước ảnh được upload trước khi lưu vào database với asp.net
Hey, xin chào các bạn, hôm nay mình giới thiệu đến các bạn một chủ đề cũng không mới trong asp.net nhưng có lẽ không phải ai biết với thủ thuật này. Bài viết này sẽ hướng dẫn các bạn thực hiện việc xem trước ảnh được upload lên server mà không cần lưu vào database.
1. Đầu tiên các bạn tạo 1 webpage. Sau đó add 3 control là FileUpload, Button và Image Control
ASPX Code:
1. Đầu tiên các bạn tạo 1 webpage. Sau đó add 3 control là FileUpload, Button và Image Control
ASPX Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <table><tr><td class="style3"><asp:Label ID="Label1" runat="server" Text="Photo upload" /></td><td class="style4"><asp:FileUpload runat="server" ID="PhotoUpload" /></td><td class="style4"><asp:Button runat="server" ID="btnPhotoPreview" Text="Preview" /></td><td class="style1"><asp:Image runat="server" ID="ImagePreview" Height="164px" Width="125px" /></td></tr></table> |
2. Bây giờ tạo sự kiện click button “btnPhotopreview”
1
| <asp:Button runat="server" OnClick="btnPreview_Click" ID="btnPhotoPreview" Text="Preview" /> |
3. Tiếp theo bạn add một class handler để thực hiện việc show ảnh. Chúng ta sẽ sử dụng một biến sessionFileBytes của control upload
Sau khi add, code trong file ashx nó có dạng như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <%@ WebHandler Language="C#" Class="ImageHandler" %>using System;using System.Web;public class ImageHandler : IHttpHandler {public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";context.Response.Write("Hello World");}public bool IsReusable {get {return false;}}} |
Chúng ta sửa lại như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <%@ WebHandler Language="C#" Class="ImageHandler" %>using System;using System.Web;public class ImageHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState{public void ProcessRequest (HttpContext context) {//Checking whether the imagebytes session variable have anything else not doing anythingif ((context.Session["ImageBytes"]) != null){byte[] image = (byte[])(context.Session["ImageBytes"]);context.Response.ContentType = "image/JPEG";context.Response.BinaryWrite(image);}}public bool IsReusable {get {return false;}}} |
4. Cuối cùng, trong sự kiện click button bên trên, bạn gọi biến session ra, và cho Image Control hiển thị giá trị trong session này ra
1
2
3
4
5
| protected void btnPreview_Click(object sender, EventArgs e){Session["ImageBytes"] = PhotoUpload.FileBytes;ImagePreview.ImageUrl = "~/ImageHandler.ashx";} |
Cuối cùng là build và chạy thử
Comments[ 0 ]
Đăng nhận xét