Kiểm tra kích thước, tên file upload và lưu vào App_Data asp.net

Đăng vào Tác giả Nguyễn Tiến Trường

Tạo web form hiển thị dữ liệu nhập trong TextArea đồng thời kiểm tra kích thước, tên file upload và lưu trong thư mục App_Data.

1. Yêu cầu

Trong VS.Net, tạo Web Site/Web Application project đặt tại D:\Web10. Trong Web Site trên, thực hiện:

  1. Tạo Web Form Bai10.aspx chứa: 1 HTML TextArea (txtNoidung), 1 HTML Input File (txtFile), 1 HTML Input Submit trong 1 HTML Form gửi đến chính trang Bai10.aspx.
  2. Lập trình xử lý khi nạp trang Bai10.aspx để nếu có dữ liệu như trong ý (1) gửi đến thì:
    • Hiển thị dữ liệu của txtNoidung.
    • Lưu file của txtFile vào 1 file có tên tương ứng trong thư mục App_Data của Web Application.

2. Hướng dẫn thực hiện

File home.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="w100.home" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bài 10</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .form{
            border: 1px solid #000;
            width:40%;
            margin: 0 auto;
        }
        .form-row{
            padding: 12px 12px;
        }

        .form-label{
            display:block;
        }
        .input-btn{
            padding: 4px 8px;
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" method="post" action="home.aspx" >
        <div class="form">
            <div class="form-row">
                <label class="form-label" for="txtNoidung">Nhập dữ liệu:</label>
                 <textarea id="txtNoidung" name="txtNoidung" runat="server">
                </textarea>
            </div>
            <div class="form-row">
                <label class="form-label" for="txtFile">Nhập file:</label>
                <input type="file" name="txtFile" id="txtFile" runat="server"/>
            </div>
            <div class="form-row">
                <input class="input-btn" type="submit" name="luu" id="luu" value="Save" onclick="Upload"/>
            </div>
            <div class="form-row">
                <div id="ketqua" name="ketqua" runat="server" ></div>
            </div>
        </div>
    </form>
</body>
</html>

Khi bạn đặt thuộc tính “runat=server” cho một phần tử HTML, nghĩa là bạn muốn phần tử đó được xử lý ở phía máy chủ (server-side) bằng mã code-behind.

Cụ thể, thuộc tính “runat=server” cho phép các phần tử HTML trở thành các điều khiển (controls) ASP.NET, và điều khiển này có thể được truy cập và xử lý từ mã code-behind. Khi trang web được tải lên trên máy chủ, các phần tử được đánh dấu “runat=server” sẽ được biến đổi thành các đối tượng ASP.NET tương ứng.

Ví dụ, trong mã của bạn, <textarea id="txtNoidung" name="txtNoidung" runat="server"></textarea> có thuộc tính “runat=server”, cho phép bạn truy cập và xử lý nội dung của textarea từ mã code-behind bằng cách sử dụng thuộc tính txtNoidung.

Phương thức Page_Load

Phương thức Page_Load là một phương thức sự kiện trong trang web ASP.NET được gọi mỗi khi trang được tải lên hoặc làm mới. Dưới đây là giải thích về logic trong phương thức này:

  1. if (IsPostBack)
    • Điều kiện kiểm tra xem trang web có được tải lên sau khi gửi biểu mẫu (PostBack) hay không. Nếu là PostBack, có nghĩa là người dùng đã gửi biểu mẫu bằng cách nhấn nút “Save” hoặc một hành động tương tự.
  2. txtNoidung.InnerHtml = "";
    • Gán giá trị rỗng cho nội dung của phần tử <textarea> có ID là txtNoidung. Điều này sẽ xóa nội dung đã nhập trước đó trong trường txtNoidung của người dùng.
  3. Upload(sender, e);
    • Gọi phương thức Upload và chuyển các đối số sender và e tương ứng. Điều này sẽ thực thi logic xử lý trong phương thức Upload để xử lý dữ liệu được gửi đi từ biểu mẫu.

Phương thức Upload

Để kiểm soát file được tải lên và kích thước của file đó, ta sử dụng if((txtFile.PostedFile != null) && (txtFile.PostedFile.ContentLength > maxFileLength)). Dưới đây là giải thích chi tiết về các phần tử trong biểu thức điều kiện:

  1. txtFile.PostedFile != null
    • Kiểm tra xem có file được tải lên thông qua phần tử <input type="file" name="txtFile" id="txtFile" runat="server"/> hay không.
    • Thuộc tính PostedFile của txtFile là đối tượng chứa thông tin về file được tải lên từ trình duyệt.
  2. txtFile.PostedFile.ContentLength > maxFileLength
    • Kiểm tra xem kích thước của file được tải lên (txtFile.PostedFile.ContentLength) có lớn hơn giới hạn maxFileLength hay không.
    • Thuộc tính ContentLength chứa kích thước của file được tải lên (tính bằng byte).

Nếu cả hai điều kiện đều đúng, tức là có file được tải lên và kích thước của file đó lớn hơn 0, mã sẽ thực hiện các hành động bên trong khối if. Dưới đây là các bước thực hiện:

  • string fn = "App_Data/" + txtFile.PostedFile.FileName;
    • Tạo đường dẫn file mới trong thư mục “App_Data” với tên file gốc được lấy từ txtFile.PostedFile.FileName.
  • string name = fn.ToString();
    • Chuyển đường dẫn file thành chuỗi.
  • int lengthfn = name.Length;
    • Lấy độ dài của chuỗi đường dẫn file.
  • if (lengthfn > 20)
    • Kiểm tra xem độ dài của chuỗi đường dẫn file có vượt quá 20 kí tự hay không.
    • Nếu vượt quá, hiển thị thông báo lỗi.
  • else
    • Trường hợp không vượt quá 20 kí tự, tiếp tục thực hiện các bước tiếp theo.
  • string fileName = "App_Data/" + DateTime.Now.ToString("yyyyMMdd_hhmmss_tt_") + txtFile.PostedFile.FileName;
    • Tạo tên file mới dựa trên ngày giờ hiện tại và tên file gốc.
  • string filePath = Server.MapPath(fileName);
    • Lấy đường dẫn tuyệt đối của file mới trong thư mục “App_Data” trên máy chủ.
  • txtFile.PostedFile.SaveAs(filePath);
    • Lưu file được tải lên vào đường dẫn tệp được chỉ định.
  • ketqua.InnerText = "Nội dung: " + noidung;
    • Hiển thị thông điệp thành công và nội dung từ trường txtNoidung.
  • catch (Exception ex)
    • Bắt các ngoại lệ nếu có lỗi trong quá trình lưu file.
  • ketqua.InnerText = "Error:" + ex.Message;
    • Hiển thị thông báo lỗi nếu xảy ra ngoại lệ.

File home.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace w100
{
    public partial class home : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                txtNoidung.InnerHtml = "";
                Upload(sender, e);
            }
        }
        protected void Upload(object sender, EventArgs e)
        {
            int maxFileLength = 512000; // 500KB = 500 * 1024
            string noidung = Request.Form["txtNoidung"];
            if (noidung == "")
            {
                ketqua.InnerHtml = "<span> Nội dung không được để trống</span>";
            }else if((txtFile.PostedFile != null) && (txtFile.PostedFile.ContentLength > maxFileLength))
            {
                ketqua.InnerHtml = "<span>File không được vượt quá 500KB</span>";
            }    
            else if ((txtFile.PostedFile != null) && (txtFile.PostedFile.ContentLength > 0))
            {
                string fn = "App_Data/" + txtFile.PostedFile.FileName;
                string name = fn.ToString();
                int lengthfn = name.Length;
                if (lengthfn > 20)
                {
                    ketqua.InnerHtml = "<span>Tên File không được vượt quá 20 kí tự</span>";
                }
                else
                {
                    string fileName = "App_Data/" + DateTime.Now.ToString("yyyyMMdd_hhmmss_tt_") + txtFile.PostedFile.FileName;
                    string filePath = Server.MapPath(fileName);
                    try
                    {

                        txtFile.PostedFile.SaveAs(filePath);
                        ketqua.InnerText = "Nội dung: " + noidung;
                    }
                    catch (Exception ex)
                    {
                        ketqua.InnerText = "Error:" + ex.Message;
                    }
                }

            }else
            {
                ketqua.InnerHtml = "<span>Bạn chưa chọn File</span>";
            }    
        }    
        
    }
}

Trên đây là hướng dẫn cách kiểm tra dung lượng, tên file trong asp.net thuộc chuỗi bài tập thực hành môn lập trình web. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.

Nguyễn Tiến Trường

Mình viết về những điều nhỏ nhặt trong cuộc sống, Viết về câu chuyện những ngày không có em