Question

我很抱歉这个问题很奇怪。

我正在尝试使用包含文件的jQuery ajax处理表单。

这就是我想要使用的......

<script>
     var file_data = $('#qfile').prop('files')[0];   
     var form_data = new FormData();
     form_data.append('file', file_data);// 
     var data = $(this).serialize();
     // Here is the problem. I sucessfully sent the file alone but I want to 
     //send all the form input values using serialize() and add formData too

</script>

我想发送文件以及所有输入serialize（）

这是我的ajax部分......

<script>
   $.ajax({

            type : 'POST',
            url  : 'ajax/ajax-reg.php',
            data : form_data,
            processData: false,
            contentType: false,

</script>

Answer 1

我想使用serialize（）发送所有表单输入值，并添加formData

在这种情况下，node.innerText对您没有帮助，但有更好的方法。只需向serialize()构造函数提供form DOMElement即可。然后，表单字段（包括图像）中的所有数据都将放入FormData对象中。试试这个：

FormData()

Answer 2

使用 jQuery ，你也可以尝试这样的事情：

var postData = new FormData($('form')[0]);

postData.append("In", $("input[name=In]").val()); // usual input
postData.append("Txt", $("textarea[name=Txt]").text()); // textarea
postData.append("File", $("input[name=File]")[0].files[0]); // file

$.post('ajax/ajax-reg.php', postData);

Answer 3

我使用jquery（但是也可以通过香草javascript轻松完成）在文件输入之后创建隐藏文本输入。然后，我将新文本输入的名称设置为与之关联的文件输入的ID，并将其值（选择文件时）设置为文件名。然后，您可以使用$('form').serializeArray();并返回与文件输入相对应的隐藏输入的name：value对。

$(document).ready(function(){

  // Dynamically create hidden text inputs for the file inputs' data
  // (create dynamically to avoid having re-write your entire html file)
	$('input:file').each( function(){
    $(this).after('<input type="text" readonly name="' + $(this).attr("id").replace("_", " ") + '" hidden value=""/>');
  });
  
  
  // When the user selects a file to be uploaded...
  $('input:file').change( function(){
  
    // If a file is selected set the text input value as the filename
    if($(this).get(0).files.length !== 0){
      $(this).next('input:text').val($(this).get(0).files[0].name);
    }
  
  });
  
  
  $("form").submit( function(e){
    e.preventDefault();
    //Clear previous data from results div
    $('#results').text("");
    
    // Serialize the form data
    var x = $('form').serializeArray();
    
    // Iterate through the array results and append
    // the data to the results div
    $.each(x, function(i, field) {
      var result  = '<span class="left">' + field.name + ' : </span>';
          result += '<span class="right">' + field.value + '</span><br>';
      $('#results').append(result);
    });
    
  });
  
});

form {
  display: inline-block;
  left: 0; 
  width: auto;
  max-width: 40%;
  margin-left: 0;
  padding: 0;
}
div.left, div.right, span.left, span.right { 
  display:block; 
  position: relative;
  width: 40%;
}
.rad { font-size: 14px; }
.left { float: left; }
.right { float: right; }

#results { 
  display: inline-block;
  position: relative;
  width: auto;
  min-width: 40%; 
  line-height: 23px;
}
#results .left { 
  color: green; 
  text-align: right;
}
#results .right { 
  color: blue; 
  text-align: left;
  margin-right: 20px;
}

.clearfix { clear: both; }

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <form id="myForm">
    <div class="left">
      <label class="right" for="name">Name:</label><br>
      <label class="right" for="gender">Gender:</label><br>
      <label class="right" for="file1">1st Pic:</label><br>
      <label class="right" for="file2">2nd Pic:</label><br>
      <label class="right" for="file3">3rd Pic:</label><br>
      <label class="right" for="file4">4th Pic:</label><br>
    </div>
    
    <div class="right">
      <input class="left" type="text" name="Name" ><br>
      <select class="left" name="Gender">
        <option selected></option>
        <option>Unspecified</option>
        <option>Female</option>
        <option>Male</option>
      </select><br>
      
      <input class="left" type="file" accept="image/*" id="File_1"><br>
      <input class="left" type="file" accept="image/*" id="File_2"><br>
      <input class="left" type="file" accept="image/*" id="File_3"><br>
      <input class="left" type="file" accept="image/*" id="File_4"><br>
    </div>
  </form>
  
  <div id="results" class="right"></div>
  
  <div class="clearfix"></div>
    <input form="myForm" type="submit" id="submit" value="Serialize Form" />
    <input form="myForm" type="reset" value="Reset Form" onClick="this.form.reset()" />
</body>

如何使用jQuery serialize（）添加文件值

3 个答案: