Hi, I am

Ngô Tôn

I am a programmer.

Home / Programming / Web Development / PHP / Upload Multi File in PHP with Ajax – Nhật ký lập trình [Chapter 4]

Upload Multi File in PHP with Ajax – Nhật ký lập trình [Chapter 4]

Sử dụng Ajax để gửi dữ liệu lên Server là kỹ thuật đã được sử dụng từ lâu giúp truyền tải dữ liệu 1 cách nhanh chóng hơn. Trong bài này, Ngô Tôn sẽ hướng dẫn cách Upload nhiều file trong PHP sử dụng Ajax.

Cấu trúc cơ bản của Ajax

  1. type: Kiểu gửi dữ liệu, có thể là POST hoặc GET, giống với thuộc tính method trong form
  2. url: Đường dẫn xử lý dữ liệu, tương tự như thuộc tính action trong form
  3. data: Tập hợp các biến dữ liệu gửi lên server
  4. dataType: Kiểu dữ liệu có thể html, text, json, xml
  5. success: Hàm chạy khi nhận dữ liệu thành công
  6. error: Hàm chạy khi có lỗi xảy ra

Upload multi file in PHP with Ajax

Để gửi được file về server ta sẽ phải dùng FormData()

Input file có dạng sau

Ta sẽ tiến hành Append vào FormData

Ajax

Ta bắt buộc phải có 2 thuộc tính contentType: false, processData: false

PHP

Ta sẽ đếm số lượng file dựa vào tên bằng hàm count($_FILES[“myfile”][“name”]). Sau đó chạy vòng lặp lấy thông tin của file pathinfo(), nếu trùng tên thì thêm “(số lượng)” vào sau tên và tiến hành upload lên server move_uploaded_file($_FILES[“myfile”][“tmp_name”][$i],$fullpath);

Vậy là xong, chúc các bạn thành công.

* Bonus cho các bạn

Nếu ta muốn truyền dữ liệu dạng mảng bằng FormData ta sẽ làm như sau:

Ta sẽ Append vào FormData:

Ở đây, hàm JSON.stringify() sẽ chuyển từ mảng sang chuỗi Json.

Phía PHP server sẽ nhận như sau:

Ta dùng hàm json_decode() để chuyển đổi chuỗi json về mảng. Chú ý là phải có đối số thứ hai là true.

About ngoton

Ngô Tôn is a programmer with passion for tailored software solutions. Comes with 7+ years of IT experience, to execute beautiful front-end experiences with secure and robust back-end solutions.

Check Also

Tạo màu ngẫu nhiên trong PHP – Nhật ký lập trình [Chapter 3]

Mục lục Xác định màu theo hệ thập lục phân – HEXXác định màu theo …

Leave a Reply

avatar
  Subscribe  
Notify of