Cách Thêm Tính Năng Tải Tệp Trong PHP Với jQuery AJAX

Bài viết này, LANIT chia sẻ cách thêm tính năng tải tệp lên PHP, jQuery và AJAX nhanh chóng. Đọc ngay bài viết để biết cách thực hiện nhé!

Tại sao sử dụng PHP, jQuery và AJAX?

Sử dụng PHP giúp tải file lên dễ dàng hơn. Bạn có thể tải các tập tin văn bản hoặc nhị phân với vài đoạn code. PHP cung cấp cho bạn toàn quyền quản lý những file đã tải lên thông qua chức năng xác thực và vận hành tệp của nó.

Trước khi tải file lên, kiểm tra loại, kích cỡ và đường dẫn vô cùng quan trọng. Quá trình này được gọi là xác nhận dữ liệu. PHP lưu trữ các chi tiết như tên file, kích cỡ và vị trí lưu trữ tạm thời của tệp trong $_FILES[“tên_file”].

Trong đó, tính năng move_uploaded_file của PHP giúp việc tải file trở nên dễ dàng. Nó sử dụng $_FILES để tải file lên. Khi bạn sử dụng PHP với jQuery AJAX, bạn có thể tải file mà không cần đồng bộ. Việc này giúp website của bạn chạy nhanh hơn, tăng trải nghiệm người dùng.

Hướng dẫn tải file lên Trong PHP Với jQuery AJAX

Thiết lập Developer Environment

Để tải tệp lên PHP, bạn cần đáp ứng một số điều kiện như:

  • PHP 8: Dùng cho server-side logic
  • MySQL: Để lưu trữ và quản lý dữ liệu
  • Tệp JQuery/Ajax: Để yêu cầu không đồng bộ tới server

Tạo một file bằng PHP

Đầu tiên, bạn cần tạp một biểu mẫu HTML. Người dùng sẽ tương tác để xác nhận dữ liệu của họ. Để cho form này làm việc với file đã tải lên, bạn cần đặt phương thức của from sang POST. Nguyên nhân là do phương thức GET không thể gửi file tới Server.

Tiếp theo, bạn sẽ phải đặt thuộc tính enctype của from sang multipart/form-data. Phương thức này khiến form data được mã hóa khi được gửi đến server.

Cuối cùng, bạn sẽ cài loại Input sang file. Điều này cho phép người dùng chọn các file đã tải lên. Sau khi cài đặt xong form của mình, tạo một tệp tên là index.php trong mục PHP của bạn và thêm code của bạn vào đó.

Tạo một file bằng PHP

Biểu mẫu này sử dụng Bootstrap classes để tạo kiểu. Thuộc tính của form này hướng đến ajaxupload.php, được dùng để gánh, đây là tập lệnh sẽ xử lý việc tải tệp lên.

tải tệp lên PHP với jQuery AJAX
Tạo một file bằng PHP

Tải lên tệp bằng jQuery AJAX

Ta sẽ sử dụng jQuery và AJAX để gửi dữ liệu và tải tệp lên. Bước đầu tiên liên quan đến việc tích hợp jQuery vào dự án này.

Tải lên tệp bằng jQuery AJAX
Tải lên tệp bằng jQuery AJAX

Phương thức $ajax() trong mã được sử dụng để truyền dữ liệu tới PHP. Để chuyển đổi dữ liệu thành công, cần xác định xem đang có bất kỳ lỗi nào xảy ra trong quá trình truyền dữ liệu hay không.

Kết nối MySQL database với PHP

Bước tiếp theo chúng ta cần thực hiện đó là cấu hình và kết nối tới database MySQL.

Vào Database Manager và tạo bảng với vai trò là Đang Tải Lên. Bảng này sẽ bao gồm các trường như tên, email, file_name. Bạn cũng có thể chọn sử dụng truy vấn SQL cho:

Kết nối MySQL database với PHP
Kết nối MySQL database với PHP

Tiếp theo, tạo db.php để kết nối cơ sở dữ liệu với ứng dụng PHP. Dán đoạn mã sau vào tệp:

Kết nối MySQL database với PHP
Kết nối MySQL database với PHP

Tạo tập lệnh PHP để tải tệp lên

Khi người dùng tương tác với form, tệp sẽ được tải lên một folder riêng tạm thời. Tất cả thông tin của file đều được lưu trữ trong một mảng đa ngăn tên là $_FILES. Chỉ mục cho array này có thuộc tính trong mục <input type=”file” name=”image”> .

$_FILES[“image”] là tên được dùng ở ví dụ này. Những file quan trọng đều được lưu trong những chỉ mục sau:

  • $img = $_FILES[“image”][“name];// lưu trữ tên file gốc trong client
  • $tmg = $_FILES[“image”][“tmp_name”];/ /Lưu trữ tên của những file tạm thời
  • $errorimg = $_FILES[“image”][“error”];// lưu trữ bất kì lỗi nào trong quá trình chuyển đổi

Sau khi file được tải lên thư mục cụ thể, tất cả thông tin đều được lưu trong array, tính năng move_uploaded_file() sẽ chuyển đổi file từ thư mục hiện tại tới một vị trí cố định. Quy trình tải tập tin được thể hiện gồm:

  • Kiểm tra bất kỳ lỗi nào xảy ra trong quá trình upload
  • Xác nhận xem loại file có được phép hay không
  • Đảm bảo rằng file không vượt quá giới hạn kích thước tệp đã đặt.
  • Xác thực tên tệp hợp lệ ( Nếu có chưa dấu / nó sẽ ảnh hưởng đến đường dẫn đích)
  • Xác nhận file không trùng lặp trên cùng vị trí (theo tên của nó)
  • Đăng tải file lên

Tiếp đến, hãy tạo một file PHP script để xử lý quá trình tải file lên. Tạo một file mới có tên ajaxupload.php và chèn đoạn mã được cung cấp và đó.

Tạo tập lệnh PHP để tải tệp lên
Tạo tập lệnh PHP để tải tệp lên

Sau khi hoàn tất, hãy chuyển đổi file đã tải từ folder hiện tại sang upload folder. Sau đó, tạo một upload folder trong thư mục project. Đây là nơi lưu trữ hình ảnh đã tải lên. Hàm pathinfo() được dùng tại đây, hàm này trả về tên file và phần mở rộng trong các chỉ mục riêng biệt.

Kiểm tra việc tạo file và tải lên tệp

Chèn mã code sau để kiểm tra các file đã tải lên để xem có lỗi nào hay không. Nếu lỗi báo zero, điều đó cho biết đã có vấn đề trong quá trình vận hành.

Kiểm tra kích thước file có nằm trong giới hạn thiết lập không

Kích thước của file được đo lường bằng byte. Do đó, nếu giới hạn kích thước của file được đặt là 500kb, thì kích thước tệp phải nhỏ hơn 500.000 byte.

Trong tập PHP script của file tải lên, move_uploaded_file là chức năng di chuyển tệp từ $myFile[“tmp_name”] (vị trí tạm thời) sang upload/. $name (vị trí cố định). Nó cũng xác minh bản ghi sẽ được chèn vào database table.

Cấu hình reCAPTCHA trong Contact Form

reCAPTCHA bảo vệ bạn khỏi tình trạng spam và báo cáo lạm dụng. Chúng hoạt động với vai trò như lớp bảo vệ chạy ở chế độ nền để ngăn chặn thư rác bằng cách phân biệt người dùng con người và BOT thông qua câu đố. Để sử dụng reCAPTCHA trên web của bạn, bạn cần sử dụng thư viện có giao diện với reCAPTCHA API. Bạn có thể tải reCAPTCHA PHP Library và sử dụng tập tin recaptchalib.php. Cài những dòng code dưới đây ở tag <form> cũng là chỗ bạn đặt reCAPTCHA.

Để xác minh xem người dùng đã cung cấp câu trả lời đúng hay chưa, bạn cần tạo một file tên verify.php, và đặt nó làm tham số action ở tag <form>. Hãy gõ code dưới đây.

Cấu hình reCAPTCHA trong Contact Form
Cấu hình reCAPTCHA trong Contact Form

Kết luận

Trên đây là các bước để tải file lên PHP với jQuery, AJAX một cách nhanh chóng. Nếu bạn còn có thắc mắc nào hoặc cần tư vấn chi tiết về dịch vụ máy chủ, hosting web liên hệ ngay để được hỗ trợ sớm nhất nhé!

avata Hải

Triệu Huyền Trang

Triệu Huyền Trang chuyên gia 3 năm kinh nghiệm trong ngành Công Nghệ, Phần Mềm. Chuyên chia sẻ các kiến thức phần mềm mã nguồn, ứng dụng và thông tin về công nghệ hữu ích.

Chat với chúng tôi qua Zalo!
Chat với chúng tôi qua Zalo!