Carga de archivos Ajax con el "Complemento de Formulario" para jQuery

Question

Estoy usando jQuery, y me gustaría cargar archivos con Ajax. Hice algunas búsquedas y descubrí que no es posible.

Sin embargo, hay un plugin jQuery, jQuery Form Plugin, que nos permite cargar archivos a través de Ajax.

Funciona muy bien, pero tengo un problema especial. Aquí está mi código:

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

Como se puede ver, tengo que sustituir la llamada $.ajax por una llamada $(this).ajaxSubmit(), con las mismas opciones. Además, tengo que crear una cadena de consulta (respuestas en serie en el código) de acuerdo con algunos campos para transmitirlo al código PHP.

Esto es lo que solía hacer cuando no tenía ningún archivo para cargar. Yo sólo serializado los campos del formulario y añadí mis cadena de consulta serialAnswers con nombre:

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

Pero mi problema es que la forma de plug-in transmite mis datos adicionales (la cadena de consulta) de esa manera (en el archivo 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] => ] 
    .... 
) 

Según la documentación, tengo que pasar un objeto JSON con la opción de datos, así:

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

Pero no sé cómo convertir mi cadena de consulta a un JSON o bject y si se interpretaría como una matriz en el lado de PHP.

¿Hay una solución?

EDITAR: Incluso si uso un iframe, no sé cómo agregar una cadena de consulta con información que no provienen de la forma (mi serialAnswer en el código anterior).

Answer 1

EDITAR: He encontrado una nueva solución, y funciona :)

He modificado el Formulario de jQuery Plugin. Página de complemento: http://jquery.malsup.com/form/#getting-started. Guión: https://github.com/malsup/form/raw/master/jquery.form.js

Para utilizar esta sintaxis:

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

en lugar de:

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

    return false; 
}); 

he modificado el código del plugin.

Encuentra este:

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

y eliminar todas las if (options.data) y su contenido. Unas pocas líneas después de estos, encontramos lo siguiente:

var q = $.param(a); 

y añadir a la derecha después de que:

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

En el FileUpload función(), encontrar esto:

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

y reemplazar por:

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

Ahora puede agregue una cadena de consulta gracias a estas modificaciones y cargue una imagen al mismo tiempo.

Answer 2

No estoy seguro exactamente lo que busca pero ¿por qué no puedes hacer:

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

A continuación, en el lado de PHP para decodificar PHP haces

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

Si necesita para devolver una respuesta JSON que acaba de hacer:

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

Supongo que esto es lo que quiere.

Answer 3

Probar Uploadify. Este es un Flash complemento de carga basado. Es fácil de implementar y admite la carga de archivos múltiples.