Ajax dosya jQuery

Question

için "Form Plugin" ile yükleme jQuery kullanıyorum ve Ajax ile dosya yüklemek istiyorum. Bazı aramalar yaptım ve mümkün olmadığını buldum. Ancak, Ajax aracılığıyla dosya yüklememize olanak tanıyan bir jQuery eklentisi, jQuery Form Plugin var.

Çok iyi çalışıyor, ancak özel bir sorunum var. İşte benim kodudur:

$('#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; 
}); 

Gördüğünüz gibi, ben de aynı seçenekleri ile bir $(this).ajaxSubmit() çağrısıyla $.ajax aramayı değiştirmek zorunda. Ayrıca, PHP koduna iletmek için bazı alanlara göre bir sorgu dizesi (kodda serialAnswers) oluşturmam gerekiyor.

Yüklemek için dosyam olmadığında ne yapardım. Sadece form alanları tefrika ve benim sorgu dizesi adlandırılmış serialAnswers ekledi:

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

Ama benim sorunum formu eklentisi (PHP dosyasında) benim ek veriler (sorgu dizesi) bu şekilde iletir olmasıdır:

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

Ama JSON o benim sorgu dizesi dönüştürmek için nasıl bilmiyorum:

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] => ] 
    .... 
) 

belgelerine göre, böyle, veri seçeneğine bir JSON nesnesi geçmek zorunda bject ve PHP tarafında bir dizi olarak yorumlanacaktır.

Çözüm var mı?

DÜZENLEME: Ben bir çerçeve kullanır bile, formdan gelmiyor bilgileri içeren bir sorgu dizesi nasıl ekleneceğini bilmiyorum (benim yukarıda koddan serialAnswer).

Answer 1

DÜZENLEME: Ben yeni bir çözüm buldu ve çalışır :) jQuery Form Plugin değiştirdiniz

. Eklenti sayfası: http://jquery.malsup.com/form/#getting-started. Senaryo: yerine

$('#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; 
}); 

: Eklenti kodunu değiştirmiş

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

    return false; 
}); 

bu sözdizimini kullanmak için https://github.com/malsup/form/raw/master/jquery.form.js

.

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

Ve tüm if (options.data) ve içeriğini silin:

bu bulun.

var q = $.param(a); 

Ve ondan sonra bu hakkı ekleyin:: bu olanlardan sonra birkaç satır, bu bulmak

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

Ve değiştirin:

fonksiyon FileUpload (In

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

), bu bulmak tarafından:

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

Şimdi yapabilirsiniz Bu değişiklikler ve bir görüntüyü aynı anda yükleyerek bir sorgu dizesi ekleyin.

Answer 2

ben senin arayan tam olarak emin değilim ama neden sadece yapamaz:

PHP tarafında Sonra

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

yapmanız PHP kodunu çözmek için

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

Eğer gerekiyorsa Sadece bir JSON yanıtını geri vermek için:

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

İstediğin bu olduğunu farz ediyorum.

Answer 3

Uploadify'u deneyin. Bu, bir Flash tabanlı yükleme eklentisidir. Birden fazla dosya yüklemeyi uygulamak ve desteklemek kolaydır.