How to upload file through Jquery/AJAX

Question

I am currently POSTING my form through AJAX with the following code:

$(document).ready(function(){
    $("form#createForm").submit(function() { // loginForm is submitted
        $("form#createForm input#createForm_submit").attr('disabled','disabled');

        tinyMCE.triggerSave();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){

                $('div.form-group').each(function(){
                    $(this).removeClass('has-error');
                });

                if (data.error) { // script returned error
                    var myList = $('ul.msg-list').empty();

                    $.each(data.msg, function(key,item) {
                        $("div."+key).addClass('has-error');
                        $('<li>').text(item.errtxt).appendTo(myList);
                    });


                    $('div#create_createresult').html('some error').html(myList);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                } // if
                else 
                { // login was successful
                    //$('form#login_loginform').hide();
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");

                } //else
            } // success
        }); // ajax
        $('div#login_loginresult').fadeIn();
        return false;
    });
});

Now I want to add the posibility of uploading a picture in the same form and just implement it in this JQUERY and in the same server-side script. My only problem is, I don't know how to do it.. I have tested the above, and I find, that it doesn't pass the $_FILES-variable to my server side script.

Can anyone lead me in any direction of, what I need to do, to add the possibility of image upload with this script?

First step, don't use .serialize(). You'll need to use window.formData, i suggest researching it. Also note that it isn't supported in many versions of IE. — Kevin B, Nov 12 '13 at 03:27
@KevinB: Well, IE isn't a problem... What do you suggest doing instead? I'll look into the formData - and maybe forget about the jquery and just use a normal post instead.. :) — denlau, Nov 12 '13 at 03:39
will this help: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — gongzhitaao, Nov 12 '13 at 03:44

score 25 · Answer 1 · edited Jun 16 '14 at 11:47

try to use this.

// grab your file object from a file input
$('#fileInput').change(function () {
  sendFile(this.files[0]);
});

// can also be from a drag-from-desktop drop
$('dropZone')[0].ondrop = function (e) {
  e.preventDefault();
  sendFile(e.dataTransfer.files[0]);
};

function sendFile(file) {
  $.ajax({
    type: 'post',
    url: '/targeturl?name=' + file.name,
    data: file,
    success: function () {
      // do something
    },
    xhrFields: {
      // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
      onprogress: function (progress) {
        // calculate upload progress
        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
        // log upload progress to console
        console.log('progress', percentage);
        if (percentage === 100) {
          console.log('DONE!');
        }
      }
    },
    processData: false,
    contentType: file.type
  });
}

it doesnot work on ie 9.0 and it lower version. please tell me how can implement same in those version of ie — Sonu, Aug 04 '14 at 06:10

How to upload file through Jquery/AJAX

1 Answers1

Linked

Related