Simple jQuery AJAX file upload

Question

I'm totally noob in jQuery and become desperate to get it to work.

This is the html:

<form method="post" enctype="multipart/form-data">
    <input id="pic "type="file" name="file" onchange="javascript:this.form.submit();">
</form>

jQuery:

$("#pic").change(function() {
    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data)
    alert(form_data);
    $.ajax({
                url: 'doupload.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function(dat){
                    alert('it works maybe');
                }
     });
});

So I just want to send the file to doupload.php and catch it there with ($_FILES['file']['tmp_name'])

But it's not working (ofc) and I don't find anything which is working either google nor stack...

I use this lilbary: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Look in the javascript console and make sure error_reporting(E_ALL) is set in php — Ben
– Ben, Commented Oct 29, 2014 at 3:33
You mean putting error_reporting(E_ALL) in doupload.php? It's not even getting connected to it :/ — user2966167
– user2966167, Commented Oct 29, 2014 at 3:36
Can you try using the latest version of javascript and using $.post() instead of $.ajax() ? — Ben
– Ben, Commented Oct 29, 2014 at 3:53

philz · Accepted Answer · 2014-10-29 04:09:40Z

1

<input id="pic "type="file" name="file" onchange="javascript:this.form.submit();">

You have "type="file"

Change it to type="file"

Also, if you have the ajax sending on change via "$("#pic").change(function() { then you SHOULD NOT have onchange="javascript:this.form.submit();" as well, as it will submit the form while the ajax is still sending, causing possible timing issues (such as the ajax call not completing)

As far as I can tell, you should not have a submit event at all, as the data is already submitted via an ajax call.

answered Oct 29, 2014 at 4:09

philz

1,1226 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Simple jQuery AJAX file upload

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