Databases
StackOverflow2013
Postsdbo
POAjax file upload with the "Form Plugin" for jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax file upload with the "Form Plugin" for jQuery
    text
    copied!<p>I am using jQuery, and I would like to upload files with Ajax. I have made some searches and found it is not possible.</p> <p>However, there is one jQuery plugin, <a href="http://malsup.com/jquery/form/#getting-started" rel="nofollow">jQuery Form Plugin</a>, which allows us to upload files through Ajax. </p> <p>It works very well, but I have a special problem. Here is my code:</p> <pre><code>$('#question-form').submit(function() { var serialAnswers = ''; // Create a query string given some fields // Format of the query string : answers[0][fr_fr][0]=a1fr&amp;answers[0][fr_fr][1]=2&amp;answers[0][en_uk][0]=a1en&amp;answers[0][en_uk][1]=6&amp;... $('#question-answers &gt; 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 += '&amp;answers[' + idx + '][' + lang + '][1]=' + $("[answerpart=value]", $(eltLang)).val() + '&amp;'; }); }); $(this).ajaxSubmit({ datatype: "html", type: "POST", data: serialAnswers, url: $(this).attr("action"), success: function(retour) { $('#res-ajax').html(retour); } }); return false; }); </code></pre> <p>As you can see, I have to replace the <code>$.ajax</code> call by a <code>$(this).ajaxSubmit()</code> call, with the same options. Moreover, I have to create a query string (serialAnswers in the code) according to some fields in order to transmit it to the PHP code.</p> <p>Here is what I used to do when I had no file to upload. I just serialized the form fields and added my query string named serialAnswers:</p> <pre><code>$.ajax({ datatype: "html", type: "POST", data: $(this).serialize() + '&amp;' + serialAnswers, url: $(this).attr("action") success: function(retour) { $("#res-ajax").html(retour); } }); </code></pre> <p>But my problem is that the form plugin transmits my additional data (the query string) that way (in the PHP file):</p> <pre><code>Array ( [question_heading_fr_fr] =&gt; something [question_heading_en_uk] =&gt; nothing [question_type] =&gt; 5 [0] =&gt; a [1] =&gt; n [2] =&gt; s [3] =&gt; w [4] =&gt; e [5] =&gt; r [6] =&gt; s [7] =&gt; [ [8] =&gt; 0 [9] =&gt; ] [10] =&gt; [ [11] =&gt; f [12] =&gt; r [13] =&gt; _ [14] =&gt; f [15] =&gt; r [16] =&gt; ] .... ) </code></pre> <p>According to the documentation, I have to pass a JSON object to the data option, like this:</p> <pre><code>data: { key1: 'value1', key2: 'value2' } </code></pre> <p>But I don't know how to convert my query string to a JSON object and if it would be interpreted as an array on the PHP side.</p> <p>Is there a solution?</p> <p><strong>EDIT</strong>: Even if I use an iframe, I don't know how to add a query string with information which does not come from the form (my <code>serialAnswer</code> from the code above).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload