javascript - 当 javascript 提交表单时，文件不会发布

Question

我有一个由 JavaScript 提交的图像上传表单，但文件数据未提交。我已经查看了如何使用 ajax 修复此问题的示例，但找不到任何使用我正在使用的 javascript 提交解决此问题的示例。

<td>New Photo<br>
<div id="editphoto">
<form id="editphoto" enctype="multipart/form-data"  method="post" action="editphoto.php">
<input type="hidden" name="employeeid" value="<?php echo $listing[$k]["employeeid"] ?>">
<input type="file" name="file2">
<input type="submit" value="Submit">
</form></div></td>

<script>
     $('#editphoto form').submit(function(){
          var data=$(this).serialize();
          $.post('editphoto.php', data , function(returnData){
                      $('#editphoto').html( returnData)
          })

          return false; // stops browser from doing default submit process
    });
      </script>

Answer 1

文件无法序列化。您可以使用 FormData 来使用 jQuery 提交文件。

 $('#editphoto form').submit(function(){

    var formData = new FormData();
    formData.append('file2', $('input[type=file]')[0].files[0]);

    // append other form-data to formData object
    var otherData = $(this).serialize();
    $.each( otherData , function(key, field){
      formData.append(field.name, field.value);
    });

    // post form
    $.ajax({
      url: 'editphoto.php',
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function( returnData ) {
          $('#editphoto').html( returnData)
      }
    }); 

    return false; // stops browser from doing default submit process
})