Przesyłanie wielu plików za pomocą formData ()


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']);

To działa, ale oczywiście tylko dla
plików [0]
. Jak sprawić, aby to działało dla wybranego pliku?
Próbowałem usunąć
[0]
, ale to nie zadziałało.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Musisz uzyskać długość plików, aby dodać je do JS, a następnie wysłać je za pośrednictwem żądania AJAX, jak poniżej
//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].'';
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Ścieżka do korzystania z 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);
}
})

Jeśli wywołasz data.append („plik”, plik) wiele razy, Twoje żądanie będzie zawierało tablicę plików.
Ja, używając node.js i złożonego pośredniego programu obsługującego wiele trybów, otrzymuję dane w następujący sposób:
router.post('/trip/save', upload.array('file', 10), function(req, res){
// Your array of files is in req.files
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wystarczy użyć
fileToUpload []
zamiast
fileToUpload
:
fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[0]);

I zwróci tablicę z wieloma nazwami, rozmiarami itp.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

To zadziałało dla mnie:
let formData = new FormData()
formData.append('files', file1)
formData.append('files', file2)
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

To zadziałało dla mnie
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
//Javascript part
//file_input is a file input id
var formData = new FormData();
var filesLength=document.getElementById('file_input').files.length;
for(var i=0;i<filesLength;i++){
formData.append("file[]", document.getElementById('file_input').files[i]);
}
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function (html) {

}
});

<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-html lang-html prettyprint-override">
<?php
//PHP part
$file_names = $_FILES["file"]["name"];
for ($i = 0; $i < count($file_names); $i++) {
$file_name=$file_names[$i];
$extension = end(explode(".", $file_name));
$original_file_name = pathinfo($file_name, PATHINFO_FILENAME);
$file_url = $original_file_name . "-" . date("YmdHis") . "." . $extension;
move_uploaded_file($_FILES["file"]["tmp_name"][$i], $absolute_destination . $file_url);
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Działało świetnie!
var fd = new FormData();$('input[type="file"]').on('change', function (e) {
[].forEach.call(this.files, function (file) {
fd.append('filename[]', file);
});
});$.ajax({
url: '/url/to/post/on',
method: 'post',
data: fd,
contentType: false,
processData: false,
success: function (response) {
console.log(response)
},
error: function (err) {
console.log(err);
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Znalazłem tę pracę dla siebie!
var fd = new FormData();
$.each($('.modal-banner [type=file]'), function(index, file) {
fd.append('item[]', $('input[type=file]')[index].files[0]);
});$.ajax({
type: 'POST',
url: 'your/path/',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
cache: false,
success: function (response) {
console.log(response);
},
error: function(err){
console.log(err);
}
}).done(function() {
// do something....
});
return false;
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Aby załadować wiele plików danych formularzy kątowych, upewnij się, że masz je w swoim pliku component.html

prześlij dokument

<div class="row">
<div class="col-md-4">
&nbsp; <small class="text-center"> Driver Photo</small>
<div class="form-group">
<input (change)="onFileSelected($event, 'profilepic')" type="file" class="form-control" >

<div class="col-md-4">
&nbsp; <small> Driver ID</small>
<div class="form-group">
<input (change)="onFileSelected($event, 'id')" type="file" class="form-control" >

<div class="col-md-4">
&nbsp; <small>Driving Permit</small>
<div class="form-group">
<input type="file" (change)="onFileSelected($event, 'drivingpermit')" class="form-control"/>


<div class="row">
<div class="col-md-6">
&nbsp; <small>Car Registration</small>
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control"
(change)="onFileSelected($event, 'carregistration')" type="file">


<div class="col-md-6">
<small id="li"> Car Insurance</small>
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control" (change)="onFileSelected($event, 'insurancedocs')" type="file">



<div style="align-items:c" class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button class="btn btn-primary" (click)="uploadFiles()">Upload
Files</button>

</form>

W twoim pliku
component.ts deklaruje tablicę wybranych plików w następujący sposób
selectedFiles = [];

// tablica wybranych plików
onFileSelected(event, type) {
this.selectedFiles.push({ type, file: event.target.files[0] });
}

// w plikach do przesyłania metod dodaj dane formularza w ten sposób
uploadFiles() {
const formData = new FormData(); this.selectedFiles.forEach(file => {
formData.append(file.type, file.file, file.file.name);
});
formData.append("driverid", this.driverid); this.driverService.uploadDriverDetails(formData).subscribe( res => {
console.log(res); },
error => console.log(error.message)
);
}

UWAGA: Mam nadzieję, że to rozwiązanie zadziała dla Was, przyjaciele
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Utwórz obiekt
FormData
const formData: any = new FormData();

I dołącz ten sam keyName
photos.forEach((_photoInfo: { localUri: string, file: File }) => {
formData.append("file", _photoInfo.file);
});

i wyślij go na serwer
// angular code
this.http.post(url, formData)

spowoduje to automatyczne utworzenie tablicy obiektów pod
file
jeśli używasz nodejs
const files :File[] = req.files ? req.files.file : null;
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Oto rozwiązanie Vanilla

JavaScript dla tego problemu to -
Najpierw użyjemy metody
Array.prototype.forEach ()
, takiej jak
document.querySelectorAll ('input [type = file]')
zwraca

tablica typu object

.
Następnie użyjemy metody
Function.prototype.call ()
, aby przypisać każdy element w

obiekt podobny do tablicy

wartość
this
w metodzie
.forEach
.

HTML

<form id="myForm"> <input type="file" name="myFile" id="myFile_1">
<input type="file" name="myFile" id="myFile_2">
<input type="file" name="myFile" id="myFile_3"> <button type="button" onclick="saveData()">Save</button></form>


JavaScript

function saveData(){
var data = new FormData(document.getElementById("myForm"));
var inputs = document.querySelectorAll('input[type=file]'); Array.prototype.forEach.call(inputs[0].files, function(index){
data.append('files', index);
});
console.log(data.getAll("myFile"));
}


Możesz zobaczyć działający przykład tego samego

HERE
https://codepen.io/bappidas/pen/BaabxrX

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się