tải lên nhiều file sử dụng formData()

Question

var fd = new FormData(); 
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
var xhr = new XMLHttpRequest(); 
xhr.open("POST", "uph.php"); 
xhr.send(fd); 

uph.php:

var_dump($_FILES['fileToUpload']); 

này hoạt động, nhưng rõ ràng cho chỉ files[0]. Làm thế nào để có được điều này làm việc cho tập tin được lựa chọn?

Tôi đã thử xóa [0] nhưng không hoạt động.

Answer 1

Bạn chỉ cần sử dụng fileToUpload[] thay vì fileToUpload:

fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[0]); 

Và nó sẽ trả về một mảng với nhiều tên, kích thước, vv ...

Answer 2

Bạn có để có được độ dài file để nối thêm trong JS và sau đó gửi nó qua yêu cầu AJAX như sau

//JavaScript 
var ins = document.getElementById('fileToUpload').files.length; 
for (var x = 0; x < ins; x++) { 
    fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[x]); 
} 

//PHP 
$count = count($_FILES['fileToUpload']['name']); 
for ($i = 0; $i < $count; $i++) { 
    echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>'; 
} 

Answer 3

cách để đi với javascript:

var data = new FormData(); 

$.each($("input[type='file']")[0].files, function(i, file) { 
    data.append('file', file); 
}); 

$.ajax({ 
    type: 'POST', 
    url: '/your/url', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data : data, 
    success: function(result){ 
     console.log(result); 
    }, 
    error: function(err){ 
     console.log(err); 
    } 
}) 

Nếu bạn gọi data.append ('tệp', tệp) nhiều lần yêu cầu của bạn sẽ chứa một mảng tệp của bạn.

Myself sử dụng Node.js và nhiều phần dữ liệu xử lý middleware multer lấy dữ liệu như sau:

router.post('/trip/save', upload.array('file', 10), function(req, res){ 
    // Your array of files is in req.files 
}