- Author:
- williamcai
- Posted:
- December 11, 2010
- Language:
- JavaScript
- Version:
- Not specified
- Score:
- 1 (after 3 ratings)
This snippet in the one to improve the method described in http://djangosnippets.org/snippets/679/. It uses some jquery extensions to make the task more easier: jquery.timers.js, jquery.progressbar.js, jquery.form.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | // to generate uuid
function genUUID() {
var uuid = ""
for (var i=0; i < 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}
return uuid;
};
// to update progress info
function updateProgressInfo() {
var progress_url = "/upload/upload_progress/"; // ajax view serving progress info
var uuid = $('#X-Progress-ID').val();
$.getJSON(progress_url, {'X-Progress-ID': uuid}, function(data, status){
if (data) {
// uncomment to check in firebug
//console.log("uploaded: " + data.uploaded);
var progress = parseInt(data.uploaded) * 100 / parseInt(data.length);
$("#upload-progress-bar").progressBar(progress);
// trigger the next one after 1s
$("#upload-progress-bar").oneTime(1000, function() {
updateProgressInfo();
});
}
});
};
// pre-submit callback
function beforeSubmitHandler(formData, jqForm, options) {
$("#upload-progress-bar").fadeIn();
$("#upload-progress-bar").progressBar({
boxImage: '{{ STATIC_URL }}img/progressbar/progressbar.gif',
barImage: '{{ STATIC_URL }}img/progressbar/progressbg_orange.gif'
});
// trigger the 1st one
$("#upload-progress-bar").oneTime(1000, function(){
updateProgressInfo();
});
return true;
};
// post-submit callback
function successHandler(responseText, statusText, xhr, $form) {
// delay and redirect the page to somewhere else
$("#upload-file-form").oneTime(1000, function() {
{% url tracefiles-root as tracefiles_root_url %}
window.location.replace("{{ tracefiles_root_url }}process/");
});
return true;
};
// on page load
$(function() {
var uuid = genUUID(); // id for this upload so we can fetch progress info.
// save the uuid with the element
$('#X-Progress-ID').val(uuid);
var options = {
dataType: "xml",
url: "/upload/?X-Progress-ID="+$('#X-Progress-ID').val(),
beforeSubmit: beforeSubmitHandler,
success: successHandler
};
$("#upload-file-form").ajaxForm(options);
});
// template code
<form action="" method="post" id="upload-file-form" enctype="multipart/form-data">{% csrf_token %}
<fieldset>
<legend>{% trans 'Upload File' %}</legend>
<input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
<div>
<div>
{{ form.as_p }}
</div>
<div><span id="upload-progress-bar"></span></div>
<div class="submit-row">
<input type="submit" value="{% trans 'Upload the file' %}" class="default"/>
</div>
</div>
</fieldset>
</form>
|
More like this
- Django Collapsed Stacked Inlines by applecat 1 year, 7 months ago
- Django Collapsed Stacked Inlines by mkarajohn 3 years, 9 months ago
- Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 4 months ago
- Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 6 months ago
- Django admin inline ordering - javascript only implementation by ojhilt 11 years, 10 months ago
Comments
Unless you need the information X-Progress-ID for reasons other than tracking upload progress (and if you do, then you should probably use another parameter name anyway), then the X-Progress-ID input won't do you any good because the file upload handler on the server side doesn't have access to POST data. In other words, you can remove
because it's not doing anything.
#
Please login first before commenting.