javascript - 在服务器端使用带有 PHP 的 JQuery Ajax 提交文件和文本数据。

Question

我已经查看了很多关于这个主题的帖子，所以请不要将其标记为重复，因为没有提供直接的答案。但是，如果您真的认为我可能遗漏了一些东西，请提供跨浏览器支持(也包括 IE8+)，请指出是哪一个，然后将其标记为重复。

我想使用 JQuery AJAX 发布文件和一些文本数据，并在服务器端使用 $_FILES 和 $_POST 访问该信息。我可以在没有 AJAX 的情况下这样做。问题是当我开始使用 AJAX 时。

这是一个简单的例子:

HTML:

  <form id="upload_form" method="POST" enctype="multipart/form-data">
       <input type="text"/>
       <input type="file"/>
       <button type="submit">Submit</button>
  </form>

JavaScript:

   var ser_data = $('#upload_form').serialize();

 ...on submit... {
 ...
   upload_promise = $.ajax({
    url: 'upload1.php',  
    dataType: 'html',
    type: 'POST',
    data: ser_data,
   });
 ...
  }

好吧，我们都知道 .serialize 只会序列化输入的文本字段，并且 JS 无法读取文件等。我不想在这里做任何花哨的事情。我只需要一种机制来访问服务器端 PHP 中的 $_FILES 和 $_POST 以及在客户端输入的文件名和文本数据。实际表单有更多字段(更多文件和文本类型)，但这是问题的关键。

Answer 1

要通过 ajax 发送文件和发布数据，您应该使用 FormData 对象。

https://developer.mozilla.org/docs/XMLHttpRequest/FormData

var fd = new FormData();

var myFileInput = $(" ... "); //adapt to access your file input
var files = myFileInput[0].files ;

// The loop is there to handle file inputs with multiple files
for(var i = 0, c = files.length ; i<c ; i++){
    var blob = new Blob(files[i]);
    var fileAccessName = "myFiles_"+i ; 
    fd.append(fileAccessName, blob, files[i].name);
}

// You can also send simple data along your files
fd.append('otherData', $("...").val());


$.ajax({
    url: ... , //the form's target
    data: fd,
    processData: false,
    type: 'POST',
    success: function(rep){
        // ...
    }
}
// since we are sending the form trough jQuery, you should also add a ev.preventDefault() to your .submit(function(ev){}) callback