StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This has been done many times before. I would recommend not writing another custom JavaScript file uploader (unless you <em>have</em> to for some other reason). I recommend the excellent <a href="http://www.plupload.com/" rel="nofollow noreferrer">Pulpload</a>. I expect that it would be substantially less effort to use an existing, well-tested, proven solution over a new implementation.</p> <p><strong>Edit:</strong> That's unfortunate! However, I have <a href="http://jsfiddle.net/gEGse/2/" rel="nofollow noreferrer"><strong>built a demo</strong></a> that I hope will help you reach a solution. It does not perform the jQuery AJAX <a href="http://api.jquery.com/jQuery.post/" rel="nofollow noreferrer"><code>post()</code></a> but it does clone a form, increment the field ID numbers and then remove the old form when the "upload" is complete. For the purposes of a demo I am simulating the "upload" with a simple <a href="https://developer.mozilla.org/En/Window.setTimeout" rel="nofollow noreferrer"><code>setTimeout()</code></a>.</p> <p><strong>Edit:</strong> Full solution with <a href="http://api.jquery.com/live/" rel="nofollow noreferrer"><code>.live()</code></a></p> <p>HTML:</p> <pre><code><div> <form> <input type="file" id="form1_field1"/> <input type="submit" value="Make it so" id="form1_field2"/> </form> </div> </code></pre> <p>JavaScript:</p> <pre><code>$('input[type="submit"]').live('click', function() { var formClone = $('form:first-child').clone(); formClone.find('input').each(function(i) { $(this).attr('id', $(this).attr('id').replace(/form(\d+)/, function(fullMatch, n) { return 'form'+(Number(n)+1); })); }); var thisForm = $(this).closest('form'); $('div').append(formClone).children(':last').hide().fadeIn(1500); // do ajax post here (faking the "upload time" with a timeout) // but really the "hideFinishedForm" method body needs to // go in the upload success callback window.setTimeout(hideFinishedForm, 5000, thisForm); return false; }); function hideFinishedForm(formToRemove) { $(formToRemove).remove(); // now submit the next form $('form input[type="submit"]').trigger('click'); } </code></pre> <p>Further reading on the <a href="https://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-functions-with-e/2954951#2954951">Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?</a></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