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

时间:2016-01-18 23:29:58

标签: javascript jquery ajax forms

我有一个图片上传表单,由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>

1 个答案:

答案 0 :(得分: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
})