Formdata() object for sending files via ajax Jquery

Question

Formdata() object for sending files via ajax Jquery

Asked 8 years, 8 months ago

Viewed 21,098 times

4

I need to send data from a form via ajax to the server (php). I used the Formdata() object but to no avail. Part of my jquery:

var formdata = new FormData($("#myform"));
var link = "form/insert";
        $.ajax({
            type: 'POST',
            url: link,
            data: formdata ,
            processData: false,
            contentType: false

        }).done(function (data) {
            $("div.container-fluid").html(data);
        });

my html has:

<input type="text" class="form-control" id="name" placeholder="name" name="name">
 <input type="file" id="arquivo" name="arquivo" />

Running the script only returns null. It would be possible to send the input text and the file via ajax?

1

Your link is with the correct url?

– David Schrammel

2015/10/26 at 23:29
Yes! In my application I rewrite the link. I receive the data perfectly in php (the problem is the file upload)

– Bruno Nascimento

2015/10/26 at 23:33
1

@I’m dev c# but I’ll try to help you hehehe', in c# I do it like this. Look at this javascript

– Brunno

2015/10/27 at 00:22
@Brunno your code is ok. I tested it here and everything right. Since I still can’t upload the form along with the file. I’m playing the file upload to Callback. But, I didn’t want to do it this way. I would have some hint?

– Bruno Nascimento

2015/10/27 at 00:49
@Brunonascimento try to do the following form If it works out, let me know and I’ll respond :)

– Brunno

2015/10/27 at 01:36

1 answer

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.

by Hiago Souza • **5,837** points · Answer 1 · 2015-10-27T01:51:37+00:00

When retrieving the form it may return an array then take key 0 from it (if there is only one).

Note: Check that the form enctype is set to "Multipart/form-data"

//Exemplo do JS
var formdata = new FormData($("form[name='nome_do_form']")[0]);
var link = "form/insert";
    $.ajax({
        type: 'POST',
        url: link,
        data: formdata ,
        processData: false,
        contentType: false

    }).done(function (data) {
        $("div.container-fluid").html(data);
    });

Example of HTML:

<form name="nome_do_form" enctype="multipart/form-data">
     <input type="text" class="form-control" id="name" placeholder="name" name="name">
     <input type="file" id="arquivo" name="arquivo" />
     <input type="submit" />
</form>

Example of PHP:

<?php

echo "Texto: " . $_POST['name'] . '<br/><br/>';

if (move_uploaded_file($_FILES['arquivo']['tmp_name'], __DIR__."/upload_".date('YmdHis')."_".$_FILES['arquivo']['name'])) {
        echo "Arquivo recebido {$_FILES['arquivo']['name']} - o seu tamanho é de  {$_FILES['arquivo']['size']}";
} else {
        echo "Falha ao fazer upload!";
}