Ajax upload file not working

Question

Html code :

<input type="file" id="file" />

jQuery code :

$.ajax({
        url: 'go.php',
        data: {file:$('#file').attr('files'),upload:name},
        cache: false,
        contentType: 'multipart/form-data',
        processData: false,
        type: 'POST',
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert("error");
        }
    });

PHP code :

if(isset($_POST['file'])){
    echo "1";
}

After upload alert empty message !

But this code should error "1"

You should look into [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and frames as a fallback for older browsers. Uploading files isn't quite as easy as just passing the value. — adeneo, Nov 16 '13 at 13:19

score 0 · Answer 1 · answered Nov 16 '13 at 13:58

Its a workaround but might help...

function uploadFile() {
            var file = document.getElementById('fileToUpload').files[0];
                if (file) {
                    var fileSize = 0;
                    var fileType = ''+file.type;
                    if(checkType(fileType)){
                            var fd = new FormData();
                            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
                            var xhr = new XMLHttpRequest();

                            xhr.open("POST", "uploadPhoto");
                            xhr.send(fd);
                    }
                    else{
                            document.getElementById('fileToUpload').value ='' ;
                            alert("Choose of specified file Format only.");
                        }
                }
        }*

score 0 · Answer 2 · edited Feb 22 '17 at 09:48

Always remember if any of these solutions dont work and files attributes are not showing on:

$.ajax({ url : here });

despite everything being correct.

If your <form> itself is getting loaded from ajax call,

try putting it in main file(ie. one being in url) or
Put <form> file at location appearing in url (ie. final folder of file appearing in url) and then use include() function to include file.

score -1 · Accepted Answer · edited May 23 '17 at 12:24

-1

Uploading files direcley using ajax is not possible. but there are some workarounds using frames. try this tutorial:

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Read this post cfr: jQuery Ajax File Upload

edited May 23 '17 at 12:24

Community

1
1

answered Nov 16 '13 at 13:13

jonas vermeulen

1,235
5
23
40

Uploading files directly using ajax IS possible. Read up on XHR2/FormData. In fact, one of your links shows how to upload files via ajax. – Ray Nicholus Nov 16 '13 at 20:11
Huh? You can upload files "using the .ajax method" as well. – Ray Nicholus Nov 17 '13 at 15:02
the link shows an example with iframes, directly with .ajax is not possible – jonas vermeulen Nov 18 '13 at 11:08
1

You may want to read the links you post, in the future (such as the first link in this case). Uploading directly via Ajax is possible, once again. Please try to do a little research before providing an answer next time, or at least have some understanding of jquery if you are going to comment on it. Jquery's Ajax function is just a wrapper for XMLHttpRequest. It is possible to upload files via xhr in all modern browsers. – Ray Nicholus Nov 18 '13 at 13:55

Ajax upload file not working

3 Answers3