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

我已经查看了很多关于这个主题的帖子,所以请不要将其标记为重复,因为没有提供直接答案.但是,如果你真的相信我可能错过了一些提供跨浏览器支持的东西(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,并在客户端输入文件名和文本数据.实际表单有更多字段(更多文件和文本类型),但这是问题的关键.

解决方法:

要通过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