Việc upload một file khá là đơn giản với UploadFile của sẵn của VS2008 nhưng nếu bạn để nó trong UpdatePanel (có nghĩa là sử dụng ScriptManager và UpdatePanel) sự việc trở nên khá là phức tạm và rắc rối, tìm kiếm trên google thì cũng có khá nhiều trường hợp và các phương pháp đơn giản nhất được nói đến là dùng iframe nhưng mình thì không thích dùng iframe vì phải tốn 1 trang nữa.
2 trường hợp và cách Xử lý như sau:
Trường hợp số 1: FileUpload được đặt trong UpdatePanel và AJAX được bật
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />
<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Trường hợp này thì xử lý như sau:
Thêm một Triggers chú ý chỗ mình đánh dấu đỏ
vào phía sau thẻ
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
Trường hợp thứ 2, cách xử lý: FileUpload được đặt trong UpdatePanel và AJAX được bật và sử dụng MultiView, View 1 được hiển thị mặc định, tạo một nút để mở View 2 lên, View 2 thì chứa UploadFile.
*** Có nghĩa là FileUpload không được hiển thị đầu tiên
Code trang upload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test_ajax_upload.aspx.cs" Inherits="admin_test_ajax_upload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:View>
<asp:View ID="View2" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />
<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br />
</asp:View>
</asp:MultiView>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Code trang upload.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class admin_test_ajax_upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
MultiView1.ActiveViewIndex = 0;
this.Page.Form.Enctype = "multipart/form-data";
}
protected void Button2_Click(object sender, EventArgs e)
{
HttpPostedFile file = FileUpload1.PostedFile;
string duongdan = Server.MapPath("~/../Upload/news/img_cat/" + FileUpload1.FileName);
FileUpload1.SaveAs(duongdan);
string tam = "Bạn đã upload file: ";
tam += "<br>Tên File: " + FileUpload1.FileName;
tam += "<br>Loại file: " + file.ContentType;
tam += "<br>File size: " + file.ContentLength;
tam += "<br> Đường dẫn: " + duongdan;
Label2.Text = tam;
}
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
}
Hy vọng giúp được ích nhiều cho những ai thiết kế website và nghiên cứu công nghệ AJAX.