jQuery ajax Upload $_FILE

Question

I'm using jQuery plugin with $.ajax() functions. There is some way to upload a file with POST and do some function when is it done? here my code.... what i do wrong?

$.ajax({
                url: "../index.php?rqst=upload",
                type: 'POST',
                data:{
                    'fileToUpload': $("#fileToUpload").val()

                },
                success: function(data) {
                    alert("file upload");
                }});

and this is the file input:

<input class="form-control" type="text" name="fileToUpload" id="fileToUpload">

and there is a way to display a gif during the load??? thanks in advance

developerwjk · Answer 1 · 2014-05-20T22:42:29.363

2

File uploads must be enctype='multipart/form-data' and you can't mix GET and POST like you're doing. Since this is POST, remove the ?rqst=upload from the url. Also $("#fileToUpload").val() is only going to give you the name of the file, not the actual file. You need a specialized javascript library to do file uploads with Ajax. Also, for a file upload, your input's type must be type='file' not type='text'.

edited May 20 '14 at 22:42

answered May 20 '14 at 22:36

developerwjk

8,619
2
17
33

score 1 · Answer 2 · answered May 20 '14 at 22:34

It's much easier to use $.post() than $.ajax().

You have it almost right. Instead of success use complete.

Just before running $.ajax(), add some simple dom manipulation code that puts a spinning gif somewhere. Then in the success callback handler add code to remove it.

Also, there is a javascript library for making spinning loading icons: http://fgnass.github.io/spin.js/#!

score 1 · Answer 3 · answered May 20 '14 at 22:36

firstly i would check you are able to connect to the file directly, comment out your data section and the change the url to a page holding an echo only. then if the page can be found connected to you will get the alert.

on another note ensure "index.php?rqst=upload" has an echo in it so the success function picks it up. i usually use echos within if else statements so i can see if an error occurs and what error, then i can use the js to display the necessary message

jQuery ajax Upload $_FILE

3 Answers3