如何通过jQuery步骤上传图像

Question

i know how to upload image by ajax but i want to upload image by jQuery steps. I've tried multiple ways but its not not working. if anyone ever done that please help me. Thank

HTML

<input type="file" style="background-color: #2184b3; color: #fff;" class="btn btn-default" name="upload_doc" id="upload_doc" title="Search for a file to add">

jQuery

if(currentIndex == 0)
                    { 
                        var upload_doc = $("#upload_doc").val();


                        event.preventDefault();
                        $.ajax({
                          async: false,
                          url: myUrl,
                          dataType: 'json',
                          type: 'POST',
                          cache: false,
                            contentType: false,
                            processData: false,
                          data : {  upload_doc : upload_doc, step1 : step1},
                          success: function(response) {
                            console.log(response);
                          }

Answer 1

From your comment,

actually the thing is that I'm submitting many values also when uploading the image. so one click of next i sends so many data including image. rest data goes well except image only.

If you're uploading file, along with other input values, through AJAX, use FormData object. But keep in mind that old browsers don't support FormData object, FormData support starts from the following desktop browsers versions: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.

So your jQuery should be like this:

if(currentIndex == 0){
    event.preventDefault();
    var formData = new FormData($('form')[0]);
    $.ajax({
        async: false,
        url: myUrl,
        dataType: 'json',
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        data : formData,
        success: function(response) {
            console.log(response);
        }
    });
}