Trong hôm nay, mình sẽ tạo trang demo về việc upload file bằng ajax. Post thẳng lên server và lưu file luôn, không cần phải postback lại trang rất mất công.
Chi tiết nội dung các bạn xem lần lượt nhé:
Đầu tiên, cần có file AjaxControlToolkit.dll để các bạn Add reference vào project thì mới được nhé. Cách add như sau: Click phải vào Solution, Add Reference... --> Browse... và chọn file AjaxControlToolkit.dll là ok.
Tiếp theo là:
Tạo trang Upload.aspx
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="AjaxUploadFile.Upload" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload file by ajax</title>
<link href="css.css?aaa=1" rel="stylesheet" />
<script type="text/javascript">
function Success() {
document.getElementById("lblMessage").innerHTML = "File đã được upload.";
}
function Error() {
document.getElementById("lblMessage").innerHTML = "File upload bị lỗi.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnUpload" runat="server" Text="Upload File" />
<asp:ModalPopupExtender runat="server" ID="modelPopupExtender1" TargetControlID="btnUpload"
PopupControlID="popUpPanel" OkControlID="btOK" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
<div style="font-weight: bold; border: Solid 3px #C0C0C0; background-color: AliceBlue">
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="UploadComplete"
OnClientUploadComplete="Success" ThrobberID="loader" Width="400px" />
<asp:Image ID="loader" runat="server" ImageUrl="~/loading.gif" Style="display: None" />
</div>
<br />
<br />
<asp:Label ID="lblMessage" runat="server" /><br />
<br />
<div class="footer">
<asp:Button ID="btOK" CssClass="button" runat="server" Text="OK" />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find(''''modelPopupExtender1'''').hide(); return false;" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
|
Trang code behind Upload.aspx.cs
|
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxUploadFile
{
public partial class Upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
//Kiểm tra nếu chưa tồn tại thư mục Uploads thì tạo thư mục
if (!System.IO.Directory.Exists(Server.MapPath(@"~/Uploads/")))
{
System.IO.Directory.CreateDirectory(Server.MapPath(@"~/Uploads/"));
}
//Lưu file vào thư mục
string path = Server.MapPath("~/Uploads/") + e.FileName;
AjaxFileUpload1.SaveAs(path);
InsertFileUpload("/Uploads/" + e.FileName);
}
//Thêm vào table TableFileUploads. Có thể thay thế câu lệnh tùy thuộc vào dùng Enity hay Code theo lớp.
void InsertFileUpload(string FilePath)
{
string connectionName = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
SqlConnection cnn = new SqlConnection(connectionName);
cnn.Open();
SqlCommand cmd = new SqlCommand("Insert INTO TableFileUploads Values(@LinkFile)", cnn);
cmd.Parameters.AddWithValue("@LinkFile", FilePath);
cmd.ExecuteNonQuery();
cnn.Close();
}
}
}
|
Hình demo
Link file download:
http://www.mediafire.com/download/18tfztxwcn5h5va/AjaxUploadFile.rar
Bài viết: Nguyễn Hải Đăng