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

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

我想使用jqueryajax发布文件和一些文本数据，并使用

$\u files

和

$\u post

在服务器端访问这些信息。没有AJAX我也能做到这一点。问题是当我开始使用AJAX时

下面是一个简单的例子：

HTML:

---

嗯，我们都知道，

.serialize

只会序列化输入的文本字段，文件不可被JS读取，等等。我不想在这里做任何花哨的事情。我只需要一个机制来访问服务器端PHP中的

$\u文件

和

$\u POST

，并在客户端输入文件名和文本数据。实际表单有更多的字段（更多的文件和文本类型），但这是问题的症结所在。

如果您

提交
（意思是浏览器事件）表单，则不再使用AJAX


将按钮更改为
type=“button”
，而不是
type=“submit”

将Javascript从表单元素上的提交时的
更改为按钮上的单击时的

给每个人起一个名字
添加一个
success（）
和
failure（）
回调，提醒用户它工作或失败（以及您自己的调试）

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


var fd=new FormData（）；
var myFileInput=$（“..”）//调整以访问您的文件输入
var files=myFileInput[0]。文件；
//循环用于处理多个文件的文件输入
对于（var i=0，c=files.length；i这是跨浏览器？确实很容易理解。我现在已经对它进行了升级。在尝试并看到其他内容后，我肯定会接受答案。奇怪的是，关于这个主题的所有其他帖子都让它看起来如此复杂。只要你使用的是低于2.x的jQuery版本，是的，cross browser是游戏的名称。很可能你需要添加一个
contentType:“…”
，以匹配你所期望的文件。@Samir yes FormData是XMLHTTP2的一个很好的新添加，我会利用它。该用户的回答很好。我会继续研究它，因为我们刚刚拥有的东西一定在盯着我们看不记得了。我也会试试你的解决方案。你对上面相对简单的一个有什么意见吗？我已经对你的答案投了赞成票。这是跨浏览器的吗？从jQuery文档上可以看到，.serialize没有正确处理“文件”输入。“文件选择元素中的数据没有序列化”.我承认我的答案更复杂，但它允许您更好地控制发送内容（例如通过检查某些值）你可以在MDN上找到跨浏览器信息-支持IE 10、Opera 12、Chrome 7、FF 4我正在浏览你发送的链接。我会浏览、理解并测试它。这里有任何浏览器问题吗？例如IE 8？不幸的是，旧版本的浏览器（如IE 8）不允许通过JS高度控制其他文件。我接受你的答案，因为它在技术上是正确的，我没有更好的选择。虽然我找到了一个iframe技巧，但还没有测试它。再次感谢。
  <form id="upload_form" method="POST" enctype="multipart/form-data">
       <input type="text"/>
       <input type="file"/>
       <button type="submit">Submit</button>
  </form>

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

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

<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>

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);
        }
    });
});

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