StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I recently implemented a multi file upload UI for an old asp.net website, but the concepts should be the same.</p> <p>I'm not very good at writing (summarizing code) but here goes.</p> <ol> <li><p>Create a number of IFrames. I had problems trying to write IFrames after the document loaded due to security restrictions, so had the server render as many as I though the user would use at once.</p></li> <li><p>Add an 'upload' button and handler which first adds a <code>load</code> handler to one of the iframes. </p> <p>var frame = $('iframe:first');</p></li> </ol> <p><strong>in the frame load handler ---</strong></p> <pre><code>frame.load(function () { /* all the code below* /}); </code></pre> <p>2.a. Write the input tag for file and what ever other elements you like into the frame like this</p> <pre><code>frame.contents().find('body').html("html goes here"); </code></pre> <p>2.b. Now add a handler to the file input in your frame and submit that form:</p> <pre><code>frame.contents().find('#fileUpload').change( /*submit the form */) </code></pre> <p>2.c. Now invoke the file upload dialog</p> <pre><code>frame.contents().find('#fileUpload').click(); </code></pre> <p>2.d. Now that line will block until the dialog returns. When it does you have to check the value of the file upload control for <code>null</code> in case they canceled. This is where i marked the iframe as not in use.</p> <p>2.e. Ether way you'll need to unbind from the load of the iframe and rebind to a different method that will handle the return (upload complete)</p> <pre><code>frame.unbind('load'); frame.load(function () { /* handle file uploaded */}) </code></pre> <p>2.e.1. This is where I reported success to the user and released the frame so it could be reused.</p> <p>2.e.2. Finally unbind from load again from the upload complete method </p> <p>All of that is in your <strong>frame load handler</strong></p> <p>3.Now cause the frame to load</p> <pre><code>frame.load(); </code></pre> <p>At least thats how I did it. I uploaded all the files to a handler which reported file % and a loop inside the parent page fired off ajax getting and displaying the progress of each file.</p> <p>The main idea is if you want multi file upload in an 'ajaxy' style but not using flash or Html 5 you'll need to use a collection of iframes and some fancy script.</p> <p>Hope this helps.</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