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