使用jQuery的「表單插件」來上傳Ajax文件

Question

我正在使用jQuery，並且想用Ajax上傳文件。我做了一些搜索，發現它是不可能的。

但是，有一個jQuery插件jQuery Form Plugin，它允許我們通過Ajax上傳文件。

它工作得很好，但我有一個特殊的問題。這裏是我的代碼：

$('#question-form').submit(function() { 
    var serialAnswers = ''; 

    // Create a query string given some fields 
    // Format of the query string : answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6&... 
    $('#question-answers > div').each(function(idx, elt) { 
     $('div[lang]', $(elt)).each(function(idxLang, eltLang) { 
      var lang = $(this).attr('lang'); 
      serialAnswers += 'answers[' + idx + '][' + lang + '][0]=' + $("[answerpart=display]", $(eltLang)).val(); 
      serialAnswers += '&answers[' + idx + '][' + lang + '][1]=' + $("[answerpart=value]", $(eltLang)).val() + '&'; 
     }); 
    }); 

    $(this).ajaxSubmit({ 
     datatype: "html", 
     type: "POST", 
     data: serialAnswers, 
     url: $(this).attr("action"), 
     success: function(retour) { 
      $('#res-ajax').html(retour); 
     } 
    }); 

    return false; 
}); 

正如你所看到的，我有一個$(this).ajaxSubmit()調用替換$.ajax調用，使用相同的選項。此外，我必須根據一些字段創建一個查詢字符串（代碼中的serialAnswers），以便將其傳輸到PHP代碼。

這是當我沒有文件上傳時我曾經做過的事情。我只是序列化的表單字段，並添加我的命名serialAnswers查詢字符串：

$.ajax({ 
    datatype: "html", 
    type: "POST", 
    data: $(this).serialize() + '&' + serialAnswers, 
    url: $(this).attr("action") 
    success: function(retour) { 
     $("#res-ajax").html(retour); 
    } 
}); 

但我的問題是，表單插件發送我的附加數據（查詢字符串）這種方式（在PHP文件）：

Array 
(
    [question_heading_fr_fr] => something 
    [question_heading_en_uk] => nothing 
    [question_type] => 5 
    [0] => a 
    [1] => n 
    [2] => s 
    [3] => w 
    [4] => e 
    [5] => r 
    [6] => s 
    [7] => [ 
    [8] => 0 
    [9] => ] 
    [10] => [ 
    [11] => f 
    [12] => r 
    [13] => _ 
    [14] => f 
    [15] => r 
    [16] => ] 
    .... 
) 

根據該文件，我有一個JSON對象傳遞給數據選項，如：

data: { key1: 'value1', key2: 'value2' } 

但我不知道該如何處理我的查詢字符串轉換成JSONØ對象，如果它將被解釋爲PHP端的數組。

有沒有解決方案？

編輯：即使我使用iframe，我不知道如何添加與信息的查詢字符串，它並非來自表單（我serialAnswer從上面的代碼）。

Answer 1

編輯：我發現了一個新的解決方案，它的工作:)

我已經修改了jQuery表單插件。插件頁面：http://jquery.malsup.com/form/#getting-started。腳本：https://github.com/malsup/form/raw/master/jquery.form.js

爲了使用這個語法：

$('#myform').submit(function() { 
    var queryString = 'answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6'; 

    $(this).ajaxSubmit({ 
     dataType: 'html', 
     data: queryString 
    }); 

    return false; 
}); 

代替：

$('#myform').submit(function() { 
    $(this).ajaxSubmit({ 
     dataType: 'html', 
     data: {'key':'value' } 
    }); 

    return false; 
}); 

我已經修改了插件代碼。

找到這個：

var n,v,a = this.formToArray(options.semantic); 
if (options.data) { 
    options.extraData = options.data; 
    for (n in options.data) { 
     if(options.data[n] instanceof Array) { 
      for (var k in options.data[n]) { 
       a.push({ name: n, value: options.data[n][k] }); 
      } 
     } 
     else { 
      v = options.data[n]; 
      v = $.isFunction(v) ? v() : v; // if value is fn, invoke it 
      a.push({ name: n, value: v }); 
     } 
    } 
} 

，並刪除所有if (options.data)及其內容。這些的後幾行，找到這個：

var q = $.param(a); 

，並在其後添加此權：

if (options.data) { 
    options.extraData = options.data; 
    q += '&' + options.data; 
} 

在功能文件上傳（），發現這個：

var extraInputs = []; 
try { 
    if (s.extraData) { 
     for (var n in s.extraData) { 
      extraInputs.push(
       $('<input type="hidden" name="'+n+'" value="'+s.extraData[n]+'" />') 
        .appendTo(form)[0]); 
     } 
    } 

    // Add iframe to doc and submit the form 
    $io.appendTo('body'); 
    io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false); 
    form.submit(); 
} 

而更換它通過：

var extraInputs = []; 
try { 
    if (s.extraData) { 
     var couples = s.extraData.split('&'); 
     for (var c=0 ; c < couples.length ; c++) 
     { 
      var couple = couples[c].split('='); 
      extraInputs.push(
       $('<input type="hidden" name="'+couple[0]+'" value="'+couple[1]+'" />') 
        .appendTo(form)[0]); 
     } 
    } 

    // add iframe to doc and submit the form 
    $io.appendTo('body'); 
    io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false); 
    form.submit(); 
} 

你現在可以添加一個查詢字符串感謝這些修改和上傳圖像在同一時間。

Answer 2

我不知道你尋找什麼，但爲什麼你不能只是做：

data: {'key1':$(this).serialize(),'key2': serialAnswers} 

然後在PHP端你做解碼PHP

json_decode($arr); //Where $arr is whatever the array is that gets passed 

如果您需要回傳一個你剛剛做的JSON響應：

json_encode($arr); //Where arr is an array you build within your script 

我假設這就是你想要的。

Answer 3

嘗試Uploadify。這是基於Flash的上傳插件。它很容易實現並支持多個文件上傳。