Error with AJAX multiple image uploader

Question

I'm trying to make an image uploader with PHP and JavaScript (jQuery using $.ajax).

HTML:

<form method="post" action="php/inc.publicar.php" id="publicacion" enctype="multipart/form-data">
   <input type="file" id="file" name="file[]" accept="image/*" multiple />
   <p id="estado"></p>
</form>

JS:

var files;
$('#file').on('change', subiendoImagenes);

function subiendoImagenes(event) {
    files = event.target.files;
    event.stopPropagation();
    event.preventDefault();
    var fileSize = $(this).get(0).files[0].size;
    if (fileSize < 2097152) {
        var data = new FormData();
        $.each(files, function(key, value) {
            data.append('file', value);
        });

        $.ajax({
            url: 'php/inc.uploadFile.php',
            cache: false,
            contentType: false,
            processData: false,
            type: 'post',
            data:  data,
            beforeSend: function() {
                $('#estado').html('Subiendo imagen por favor espere...');
            },
            success: function(data, textStatus, jqXHR) {
                if(typeof data.error === 'undefined') {
                    $('#estado').html(data);
                } else {
                    console.log('ERRORS: ' + data.error);
                }   
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('ERRORS: ' + textStatus);
            }
        });
    } else {
        $('#estado').html('El peso de la imagen que intenta subir, excede los <strong>2MB</strong>')
    }
}

PHP:

$errors = 0;
if(isset($_POST) && $_SERVER["REQUEST_METHOD"] == "POST") {
    if (array_key_exists('file', $_FILES)) {
        $image = $_FILES["file"]["name"];
        $imagenSubida = $_FILES['file']['tmp_name'];
        $max_file_size = 2097152; // 2 MB

        foreach ($image as $f => $name) { // Line of error
            // all code here works correctly
        } // Fin Foreach
    } else { echo 'Error inesperado.'; }
}

I think the problem is in the JavaScript. I think when you submit the files, it sends only one.

**var_dump($_FILES) uploading 3 files: **

Why is it not sending all the files?

Ferrmolina · Accepted Answer · 2016-02-22 09:30:13Z

3

Error is : data.append('file', value); please change it to

$.each(files, function(key, value) {
  data.append('file[]', value);
});

edited Feb 22, 2016 at 9:30

Ferrmolina

2,7692 gold badges33 silver badges48 bronze badges

answered Feb 22, 2016 at 8:31

Mudaser Ali

4,3593 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error with AJAX multiple image uploader

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related