How do you upload file(s) with AJAX

Question

I am currently trying to upload a file through a form I made, using jQuery. This is what I am attempting to do:

    function ajax_upload(){
    var formData = new FormData($('form#userform'));
        $.ajax({
        url: location.protocol + "//" + location.host + "/profile/uploadPicture",
        dataType: 'json',
        data: formData,
        type: 'post',
        success: function(data, status){
        if (data.status == 'error') {
            $('#error').html(data.msg);
        }
        else {
            var filename = location.protocol + "//" + location.host + "/data/profiles/" + data.msg;

            $('input#filename').val(filename);
            close_upload_form();
            pop_profilechanger(filename);

        }
    }
});
    return false;

}

the form appears to post to the backend, but while trying to return the filename from the uploaded file in a JSON object like: echo json_encode(array('status' => $status, 'msg' => $msg));

Is there something wrong? Please tell me

While you didn't say what the problem is, we should keep things in the scope of jQuery for all intents and purposes. `var formData = new FormData($('form#userform'));` should be `var formData = $('form#userform').serialize()` - this will ensure that the data is sent to the server as a string like, `name=george&email=george@george.com&validated=1`...or whatever your input fields / values are...Also...did i mention, what's the error? — Ohgodwhy, Aug 07 '12 at 02:15
You can't upload directly through javascript as its a security risk, and policies at a browser level will not allow it. There are work arounds, involving flash, iframes, gears, sockets, and other various techniques. But in all I think something flash is your best candidate. This is also very likely why your not getting any uploads to work. Yes, the form will post but not with the file as you anticipate through conventional AJAX means. check out plupload its a jquery uploader thats very basic in design but highly effective — chris, Aug 07 '12 at 02:41
Undoubtedly, Im sure it was asked several dozen times in the past two days by many. But saying hey this question was already asked isn't helpful, if you got a link to a question that was already answered, in the form of a "possible dupe" entry, then provide that and be helpful — chris, Aug 07 '12 at 02:48
[jquery-ajax-file-upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — zb', Aug 07 '12 at 02:49
@ColeJohnson never said flash was thee answer, but it is an answer. Its a good fallback for browsers that don't support HTML5 components. But it has its drawbacks just like the rest of the solutions personally I prefer HTML5 compliant means whenever possible — chris, Aug 07 '12 at 03:15
Thats one reason I pointed out plupload its got many of options to choose from, and fails gracefully onto others when the preferred isn't supported. Or if you wish for it to to failover you can set it. plupload is fairly easy to setup for anyone who just wants to get past a seemingly small hurdle like uploading a file — chris, Aug 07 '12 at 03:17
it works with this but i cannot handle when it upload successfully $('input#userfile').live('change', function(){ console.log('upload'); $('form#userform').ajaxForm({ }).submit(); }); — Sml004, Aug 07 '12 at 03:38

score 0 · Answer 1 · answered Aug 07 '12 at 06:43

This is how I do it. If you want more information, rather than just my pasted code, check out this http://www.html5rocks.com/en/tutorials/file/dndfiles/ because my code was made for drag and drop files

        handleFiles : function(files, evt, target)
        {
            console.log(target);
            $.each(files, function(index, value)
            {
                var file = value;

                reader = new FileReader();
                reader.onload = function(evt)
                {
                    var li = $("<li class='uploading'><img data-image-id='0' src='" + evt.target.result + "' /></li>");
                    target.find('.imagesList').append(li);

                    var request = new XMLHttpRequest();
                    var formData = new FormData();
                    formData.append('image', file);

                    request.open("Post", settings.uploadImageUrl);
                    request.addEventListener("load", function(evt)
                    {
                        var id = evt.target.responseText;
                        li.removeClass('uploading');
                        li.find('img').attr('data-image-id', id);

                    }, false);
                    request.send(formData);
                };

                reader.readAsDataURL(value);

            });
        },

How do you upload file(s) with AJAX

1 Answers1