Ajax文件上传多个输入和一些数据[重复]

This question already has an answer here:

这个问题在这里已有答案：

jQuery Ajax File Upload 21 answers
jQuery Ajax文件上传21个答案

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

我想上传包含3个输入和4个以上变量的文件。

HTML

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

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.

编辑：谢谢你的回答。我尝试了krishnapal dhakad代码并且只在我添加e.preventDefault（）时工作;（有没有办法说没有preventDefault（）;？）。缺点是我也想发送变量，所以我尝试了Dharmendrasinh Chudasama的隐藏输入，我不知道如何在php中调用它，我放了$ _POST和$ _REQUEST，没有用。虽然我从这里尝试了data.append（“step”，1）;我可以用$ _POST或$ _REQUEST调用它，它运行正常。 Dharmendrasinh Chudasama用$ .ajaxSubmit（）;在我看来有点复杂，如果你能给我更多关于这方面的信息，我会非常感激。

Thanks for your time,
Andrew.

谢谢你的时间，安德鲁。

EDIT Jquery :

编辑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

2 个解决方案

#1

You can use following javascript code to submit form.

您可以使用以下javascript代码提交表单。

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

#2

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

您可以在该表单中添加隐藏字段，然后您可以使用$ .ajaxSubmit（）直接通过ajax提交表单，但为此您应该使用jquery和jquery-form等插件

#1