servidor - subir imagenes con javascript y php

Subiendo múltiples archivos usando 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'']);

Esto funciona, pero obviamente solo para los files[0] . ¿Cómo conseguir que esto funcione para el archivo elegido?

Intenté quitar el [0] , pero no funcionó.

Answer 1

¡Esto funcionó bien!

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);
}
});

Answer 2

El camino a seguir con 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);
}
})

Si llama a data.append (''archivo'', archivo) varias veces, su solicitud contendrá una matriz de sus archivos.

Yo mismo usando node.js y el multiprocesador de middleware de controlador de partes, obtengo los datos de la siguiente manera:

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

Answer 3

Solo tienes que usar fileToUpload[] lugar de fileToUpload :

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

Y devolverá una matriz con múltiples nombres, tamaños, etc ...

Answer 4

Tiene que obtener la longitud de los archivos para adjuntarlos en JS y luego enviarlos a través de una solicitud AJAX como se muestra a continuación

//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/>'';
}