Code upload nhiều file sử dụng Php và JavaScript

Trong dự án của mình, nhiều lúc bạn cần phải upload các file để chèn vào bài viết, nếu là một file thì không sao, nhưng số lượng file lớn thì cả là một vấn đề. Chính vì vậy, mình sẽ chia sẻ cho các bạn cách để upload nhiều file cùng một lúc, sử dụng JS kết hợp với php. Bắt đầu thôi

HTML

Đầu tiên là chuẩn bị phần html với 1 Button để lựa chọn file. Để thêm nhiều tệp hãy thêm thuộc tính multiple và thêm sự kiện onclick vào chức năng uploadFile(). Code đầy đủ như sau

<div >
  <input type="file" name="files" id="files" multiple>
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

PHP

Tạo một file có tên  ajaxfile.phpvà một thư mục  uploadsđể lưu trữ các file khi upload.

Sử dụng biến $countfiles.=để đếm tổng số tệp. Gán vị trí thư mục tải lên vào biến $upload_location.

Tạo biến count để lưu trữ số lượng tệp đã tải lên thành công.

Lặp lại các tệp. Đọc tên tệp và tạo đường dẫn tệp.

Đọc phần mở rộng tệp và gán phần mở rộng tệp hợp lệ cho mảng $valid_ext.

Nếu phần mở rộng tệp tồn tại trong mảng $valid_extthì hãy tải tệp lên và tăng $countthêm 1.

Kết quả trả lại cho biến $count

Xem thêm: Phân trang trong laravel

<?php

// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "uploads/";

$count = 0;
for($i=0;$i < $countfiles;$i++){

   // File name
   $filename = $_FILES['files']['name'][$i];

   // File path
   $path = $upload_location.$filename;

   // file extension
   $file_extension = pathinfo($path, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid file extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   // Check extension
   if(in_array($file_extension,$valid_ext)){

      // Upload file
      if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$path)){
        $count += 1;
      } 
   }

}

echo $count;
exit;

JavaScript

Tạo function uploadFile()để thực hiện chức năng khi nhấp vào nút.

Gán tổng số tệp đã chọn trong biến totalfiles. Nếu totalfileskhông lớn hơn 0(tức là trống) alert("Please select a file");.

Nếu totalfiles > 0sau đó tạo 1 Object tên FormData và thực hiện vòng lặp trên các tệp đã chọn,  sau đó  nối thêm vào Object FormData.

Để gửi yêu cầu AJAX, hãy tạo một đối tượng của  XMLHttpRequest. Với phương thức  open() đặt phương thức yêu cầu  "POST" và đường dẫn tệp AJAX.

Xử lý lệnh gọi lại thành công AJAX bằng phương thức  onreadystatechange(). Gán  this.responseTextcho responsebiến và cảnh báo response.

Truyền đối tượng  formData với phương thức  send() .

// Upload file
function uploadFile() {

  var totalfiles = document.getElementById('files').files.length;

  if(totalfiles > 0 ){

    var formData = new FormData();

    // Read selected files
    for (var index = 0; index < totalfiles; index++) {
      formData.append("files[]", document.getElementById('files').files[index]);
    }

    var xhttp = new XMLHttpRequest();

    // Set POST method and ajax file path
    xhttp.open("POST", "ajaxfile.php", true);

    // call on request changes state
    xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

          var response = this.responseText;

          alert(response + " File uploaded.");

       }
    };

    // Send request with data
    xhttp.send(formData);

  }else{
    alert("Please select a file");
  }

}

Kết quả

Sau khi thực hiện thành công, kết quả sẽ như sau

Bạn có thể tải toàn bộ SOURCE CODE của bài hướng dẫn này tại đây