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:

10 odpowiedzi

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

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

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

Potwierdzenie od:

To zadziałało dla mnie:

let formData = new FormData()

formData.append('files', file1)

formData.append('files', file2)

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) {

 

 }

});

<?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

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

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

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

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

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ę

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

10 odpowiedzi

Powiązane pytanie

Stan problemu

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

Linki dotyczące treści

10 odpowiedzi

Powiązane pytanie

Stan problemu