使用jQuery.ajax發送multipart / formdata

我在使用jQuery的ajax函數將文件發送到服務器端PHP腳本時遇到問題。 可使用$('#fileinput').attr('files')獲取文件列表，但如何將這些數據發送到服務器呢？ 使用文件輸入時，服務器端php腳本上的結果數組（ $_POST ）爲0（ NULL ）。

我知道這是有可能的（儘管直到如今我尚未找到任何jQuery解決方案，只有Prototye代碼（ http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ）） ）。

這彷佛是相對較新的，因此請不要說起經過XHR / Ajax沒法上傳文件，由於它確實能夠正常工做。

我須要Safari 5，FF和Chrome中的功能會不錯，但不是必需的。

我如今的代碼是：

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

---

#1樓

我只是根據閱讀的一些信息構建了此功能。

像使用.serialize()同樣使用它，而只需放入.serializefiles(); 。
在個人測試中工做。

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

---

#2樓

FormData類確實起做用，可是在iOS Safari（至少在iPhone上）中，我沒法按原樣使用Raphael Schweikert的解決方案。

Mozilla Dev 在處理FormData對象方面有一個不錯的頁面。

所以，在頁面的某處添加一個空表單，指定enctype：

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

而後，將FormData對象建立爲：

var data = new FormData($("#fileinfo"));

並按照Raphael的代碼進行 。

---

#3樓

1. 經過jquery-> $（「＃id」）[0]獲取表單對象
2. 數據=新的FormData（$（「＃id」）[0]）;
3. 好的，數據就是你想要的

---

#4樓

若是您的表單是在HTML中定義的，則將表單傳遞給構造函數要比迭代和添加圖像容易。

$('#my-form').submit( function(e) {
    e.preventDefault();

    var data = new FormData(this); // <-- 'this' is your form element

    $.ajax({
            url: '/my_URL/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',     
            success: function(data){
            ...

---

#5樓

看個人代碼，它對我有用

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );