如何通过jQuery步骤上传图像

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);
                          }

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);
        }
    });
}

Follow this way for upload an image, In this way you don't want HTML form.

Add this code to your mainpage.php

<input type="file" name="upload_doc" id="upload_doc" title="Search for a file to add"/>
<input id="uploadImage" type="button" value="Upload Image" name="upload"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script type="text/javascript">
    jQuery.noConflict();
    jQuery('#uploadImage').on("click", function (e) {
        var uploadedFile = new FormData();
        uploadedFile.append('upload_doc', upload_doc.files[0]);
        jQuery.ajax({
          url: 'lab1.php',
          type: 'POST',
          processData: false, // important
          contentType: false, // important
          dataType : 'json',
          data: uploadedFile
        });
    });
</script>

Then add this for upload.php

<?php
    // check record array
    print_r($_FILES);
    move_uploaded_file($_FILES['upload_doc']['tmp_name'], $_FILES['upload_doc']['name']);
?>