Question

我正在尝试使用下面的代码使用AJAX + jQuery来发布表单数据

<script>    
$("#submit1").click(function(){
  testSubmit(event);
});

function testSubmit(event) {
  event.preventDefault();
  var data = new FormData();
  var file_data = $('input[type="file"]')[0].files; // for multiple files
  for(var i = 0;i<file_data.length;i++){
    data.append("file_"+i, file_data[i]);
  }

  var other_data = $('#form_id').serializeArray();
  $.each(other_data,function(key,input) {
    data.append(input.name,input.value);
  });

  $.ajax({
    url: 'test.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
      alert(data);
    }
  });
}  
</script>

这里submit1是form_id

表单上的一个按钮

此代码工作正常，但下面的行

data.append("file_"+i, file_data[i]);

你可以看到发布id为file_0，file_1等的文件。我怎样才能将它作为输入元素的实际id而不是通用file_0，file_1等？

感谢您阅读本文

Answer 1

如果您正在使用jQuery，那么为什么不这样呢

$('input[type="file"]').each(function($i){
  data.append($(this).prop("id"), $(this)[0].files[0]);
});

整个代码： -

<script>    
  $("#submit1").click(function(){
    testSubmit(event);
  });

  function testSubmit(event) {
    event.preventDefault();
    var data = new FormData();

    $('input[type="file"]').each(function($i){
      data.append($(this).prop("id"), $(this)[0].files[0]);
    });

    var other_data = $('#form_id').serializeArray();
    $.each(other_data,function(key,input){
      data.append(input.name,input.value);
    });

    $.ajax({
      url: 'test.php',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
        alert(data);
      }
    });
  }   
</script>

使用带有输入元素ID的AJAX + jQuery发布文件

1 个答案: