How to pass multiple files values through formdata ()

Question

How do I pass multiple upload values through formdata? I have the following form below:

<form action="#" class="form-horizontal"> 
    <div class="form-group">
        <label class="col-sm-2 control-label">Titulo</label>
        <div class="col-sm-10">
            <input type="text" name="titulo" class="form-control" placeholder="Digite o titulo">
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label">Imagem</label>
        <div class="col-sm-10">
            <input type="file" name="Arquivos[]" id="arquivos" class="form-control" multiple>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
            <div class="progress progress-striped active">
                <div class="progress-bar" style="width: 0%">
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success upload">Cadastrar</button>
        </div>
    </div>
</form>

JQuery

<script>
    $(document).on('submit', 'form', function (e) {
        e.preventDefault();
        //Receber os dados
        $form = $(this);                
        var formdata = new FormData($form[0]);
        //Criar a conexao com o servidor
        var request = new XMLHttpRequest();
        //Progresso do Upload
        request.upload.addEventListener('progress', function (e) {
            var percent = Math.round(e.loaded / e.total * 100);
            $form.find('.progress-bar').width(percent + '%').html(percent + '%');
        });
        //Upload completo limpar a barra de progresso
        request.addEventListener('load', function(e){
            $form.find('.progress-bar').addClass('progress-bar-success').html('upload completo...');
            //Atualizar a página após o upload completo
            setTimeout("window.open(self.location, '_self');", 1000);
        });
        //Arquivo responsável em fazer o upload da imagem
            request.open('post', 'processa.php');
            request.send(formdata);
            console.log(formdata);
    });
</script>

When I put it this way:

<input type="file" name="Arquivos" id="arquivos" class="form-control">

It works normally, but when I put:

<input type="file" name="Arquivos[]" id="arquivos" class="form-control" multiple>

It does not pass the values to PHP. I've tried to put it this way:

formdata.append("Arquivos[]", document.getElementById('arquivos').files[0]);

It also didn't work!

The file processa.php looks like this:

$tmp_name = $_FILES['arquivo']['tmp_name'];
$name = $_FILES['arquivo']['name'];
$titulo = $_POST['titulo'];
for($c = 0; $c < count($tmp_name); $c++){
    move_uploaded_file($tmp_name, 'documento/'. $name);
}

But I think the problem is in Jquery, because as I said earlier, when I send without being multiple, it works correctly. Sorry for my English.

Does this answer your question? [Uploading multiple files using formData()](https://stackoverflow.com/questions/12989442/uploading-multiple-files-using-formdata) — Drew, Sep 21 '20 at 22:52
Try to echo $c in your php code and console.log(formdata) in jquery to see what is being passed when you try uploading — Temidayo Dtuzzy Omotayo, Sep 21 '20 at 22:55

score 0 · Answer 1 · answered Sep 21 '20 at 22:56

0

When you have [] in the input name, $_FILES['arquivo']['xxx'] become arrays. You knew this because you used count($tmp_name), but then you forgot to index the variables.

for($c = 0; $c < count($tmp_name); $c++){
    move_uploaded_file($tmp_name[$c], 'documento/'. $name[$c]);
}

answered Sep 21 '20 at 22:56

Barmar

741,623
53
500
612

Hello, Barmar. I did it that way, but it didn't work. – Sep 21 '20 at 23:04
Hello, Drew. I saw the post, but I'm a layman in Jquery and I couldn't implement it in my code, because it has a progress bar. – Sep 21 '20 at 23:11
Hello, Temidayo Dtuzzy Omotayo. Return: ´(index):70 FormData {} __proto__: FormData append: ƒ append() delete: ƒ delete() entries: ƒ entries() forEach: ƒ forEach() get: ƒ () getAll: ƒ getAll() has: ƒ has() keys: ƒ keys() set: ƒ () values: ƒ values() constructor: ƒ FormData() Symbol(Symbol.iterator): ƒ entries() Symbol(Symbol.toStringTag): "FormData" __proto__: Object´ – Sep 21 '20 at 23:12
1

`$_FILES['arquivos']` should be `$_FILES['Arquivos']`. – Barmar Sep 22 '20 at 02:25
Use the Network tab of DevTools to confirm what's being submitted by AJAX. – Barmar Sep 22 '20 at 02:26
`console.log(formdata)` isn't useful, it doesn't show the details. – Barmar Sep 22 '20 at 02:26
You're right. It was my lack of attention ($_FILES['Arquivos']). Thank you very much Barmar. Greetings from Brazil. – Sep 22 '20 at 10:14

How to pass multiple files values ​through formdata ()

1 Answers1

How to pass multiple files values through formdata ()