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.php
và 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_ext
thì hãy tải tệp lên và tăng $count
thê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 totalfiles
không lớn hơn 0(tức là trống) alert("Please select a file");
.
Nếu totalfiles > 0
sau đó 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.responseText
cho response
biế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