StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Note:</strong> This question is related to the <a href="http://www.malsup.com/jquery/form/#file-upload" rel="noreferrer">jQuery form plugin</a>. If you are searching for a pure jQuery solution, <a href="https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery">start here</a>. There is no overall jQuery solution for all browser. So you have to use a plugin. I am using <a href="http://www.dropzonejs.com/" rel="noreferrer">dropzone.js</a>, which have an easy fallback for older browsers. Which plugin you prefer depends on your needs. There are a lot of good comparing post out there, like <a href="http://tekbrand.com/jquery/10-best-jquery-file-upload-plugins" rel="noreferrer">this</a>, <a href="http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/" rel="noreferrer">this</a> or <a href="http://www.bestfreewebresources.com/2011/11/20-awesome-jquery-file-uploader-plugins.html" rel="noreferrer">this</a>. </p> <p>From the <a href="http://jquery.malsup.com/form/" rel="noreferrer">examples</a>:</p> <p><strong>jQuery:</strong></p> <pre><code>$(function() { var bar = $('.bar'); var percent = $('.percent'); var status = $('#status'); $('form').ajaxForm({ beforeSend: function() { status.empty(); var percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal); percent.html(percentVal); }, complete: function(xhr) { status.html(xhr.responseText); } }); }); </code></pre> <p><strong>html:</strong></p> <pre><code><form action="file-echo2.php" method="post" enctype="multipart/form-data"> <input type="file" name="myfile"><br> <input type="submit" value="Upload File to Server"> </form> <div class="progress"> <div class="bar"></div > <div class="percent">0%</div > </div> <div id="status"></div> </code></pre> <p>you have to style the progressbar with css...</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