<p>它不是最好的解决方案(也不是那么一致),但它将是最容易实现的。</p>
<p>创建js文件,例如progress_bar.js</p>
<p>在您的admin.py中</p>
<pre><code>class YouSuperModelAdmin(admin.ModelAdmin):
...
class Media:
js = ['/static/js/progress_bar.js']
...
</code></pre>
<p>正在进行中</p>
<pre><code>(function($){
$(function(){
$(document).ready(function() {
$( "#form_id" ).submit(function( event ) {
event.preventDefault();
var post_data = new FormData($("form")[0]);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
var new_div = document.createElement('div');
new_div.innerHTML = '<progress id="progressBar" value="0" max="100" style="width:300px;"></progress><h3 id="status"></h3><p id="loaded_n_total"></p>';
document.getElementsByClassName('submit-row')[0].appendChild(new_div)
xhr.upload.addEventListener("progress", progressHandler, false);
xhr.addEventListener("load", completeHandler, false);
xhr.addEventListener("error", errorHandler, false);
xhr.addEventListener("abort", abortHandler, false);
return xhr;
},
url: window.location.href,// to allow add and edit
type: "POST",
data: post_data,
processData: false,
contentType: false,
success: function(result) {
window.location.replace("/admin/yourapp/yoursupermodel/");
}
});
});
});
});
})(django.jQuery);
</code></pre>
<p>其思想是防止默认表单提交,创建新的XMLHttpRequest,用消息注入progressbar,然后发送显示进程的数据。</p>
<p>设置<strong>processData:false、contentType:false,</strong>非常重要,否则它将无法处理表单中的文件</p>
<p>最后在progress_bar.js中为进度条本身设置事件处理程序。</p>
<pre><code>function _(el) {
return document.getElementById(el);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
</code></pre>
<p><strong>注意:</strong>要避免成功后html页面出现在表单下,您必须更改返回HttpResponse对象的视图,或者只需更改window.location。</p>
<p>所描述的方法适用于django的任何表单。</p>