Ajax file upload more than one input and some data

Question

I want to upload files that contain 3 inputs and more than 4 variables.

HTML

<body>
    <form id="upload_files" method="post" enctype="multipart/form-data"></form>
    <input type="file" name="fileName1" form="upload_files"><br><br>
    <input type="file" name="fileName2" form="upload_files"><br><br>
    <input type="file" name="fileName3" form="upload_files"><br><br>
    <input type="submit" name="next" value="Next" id="next_button" form="upload_files">
</body>

Jquery

$(document).ready(function(){

        $("#next_button").on("click", function(){

            // Some Variables
            step = 1;
            file1 = 1;
            file2 = 2;
            file3 = 3;

            /*ajax code*/

        }); // end next button

    });

EDIT : Thank you for your answers. I tried the krishnapal dhakad code and worked only when i added an e.preventDefault();(Is there a way to work say without preventDefault (); ?). The disadvantage is that I also wanted to send variables, so I tried with the hidden input of Dharmendrasinh Chudasama and i didn't figure out how to call it in php, I'd put $ _POST and $ _REQUEST, did not work. While I tried from here the data.append ("step" , 1); where I can call it with $ _POST or $ _REQUEST and it worked fine. Dharmendrasinh Chudasama this way with $ .ajaxSubmit(); seemed to me somewhat complicated for me, if you could give me more information about this I would be very thankful.

Thanks for your time,
Andrew.

EDIT Jquery :

$("#next_button").on("click", function(e){

    e.preventDefault();

    var form = $("#upload_files")[0];
    var data = new FormData(form);

    //Taking this variable on php with $_POST or $_REQUEST
    data.append("step", 1);
    data.append("file1", 1);
    data.append("file2", 2);
    data.append("file3", 3);
    data.append("max", 1);

    $.ajax({
      type: "POST",
      url: "upload.php",
      data: data,
      processData: false,
      contentType: false,
      cache: false,
      success: function(data) {
        alert(data);
      }
    });// end ajax

});// end next button

score 0 · Answer 1 · answered May 09 '18 at 18:34

0

You can add hidden field in that form, and then you can directly submit form by ajax using $.ajaxSubmit() but for that you should use plugins like jquery and jquery-form

answered May 09 '18 at 18:34

Dharmendrasinh Chudasama

689
8
10

score 0 · Accepted Answer · edited May 09 '18 at 19:36

0

You can use following javascript code to submit form.

var form = $("#formId")[0];
var data = new FormData(form);

$.ajax({
  type: "POST",
  url: "form-submit-url",
  data: data,
  processData: false,
  contentType: false,
  cache: false,
  success: function(data) {}
});

edited May 09 '18 at 19:36

n4m31ess_c0d3r

2,722
5
23
34

answered May 09 '18 at 18:53

krishnapal dhakad

16
1

Ajax file upload more than one input and some data

2 Answers2