在服务器端使用 JQuery Ajax 和 PHP 提交文件和文本数据。

Question

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

我想使用 JQuery AJAX 发布文件和一些文本数据，并使用 $_FILES 和 $_POST 在服务器端的 PHP 中访问该信息。我可以在没有 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

Answer 2

如果您submit（表示浏览器事件）一个表单，则您不再使用 AJAX。

• 将您的按钮更改为type="button" 而不是type="submit"。
• 将您的 Javascript 从表单元素上的 on submit ... 更改为按钮上的 on click ...。
• 为您的<input>s 每个人命名。
• 添加success() 和failure() 回调以提醒用户它工作或失败（以及您自己的调试）。

HTML

<form id="uploadForm" enctype="multipart/form-data">
     <input name="theText" id="theText" type="text" />
     <input name="theFile" id="theFile" type="file" />
     <input type="button" name="send" id="send" value="Submit" />
</form>

jQuery

​​>

var serData = $('#uploadForm').serialize();

$('#send').on('click', function(e) {
    uploadPromise = $.ajax({
        url: 'upload1.php',  
        dataType: 'html',
        type: 'POST',
        data: serData,
        success: function() {
            alert('It worked.');
        },
        failure: function(xhr, res, err) {
            console.log(xhr);
            console.log(res);
            console.log(err);
        }
    });
});