我正在尝试使用django-progressbarupload app
将进度条添加到我的 Django 应用程序。但它不工作....django-progressbarupload app
模板标签加载正常,文件也上传到服务器,但进度条没有显示......控制台上没有javascript错误......我已经按照本教程
谁能告诉如何将进度条添加到 Django 应用程序
我正在尝试使用django-progressbarupload app
将进度条添加到我的 Django 应用程序。但它不工作....django-progressbarupload app
模板标签加载正常,文件也上传到服务器,但进度条没有显示......控制台上没有javascript错误......我已经按照本教程
谁能告诉如何将进度条添加到 Django 应用程序
这不是最好的解决方案(也不是那么一致),但它将是最容易实施的。
创建 js 文件,例如 progress_bar.js
在你的 admin.py
class YouSuperModelAdmin(admin.ModelAdmin):
...
class Media:
js = ['/static/js/progress_bar.js']
...
进行中_bar.js
(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);
这个想法是防止默认表单提交,创建新的 XMLHttpRequest,用消息注入进度条,然后发送显示过程的数据。
设置processData: false, contentType: false很重要,否则不会处理表单中的文件
最后在你的 progress_bar.js 中为进度条本身设置事件处理程序。
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";
}
注意:为了在成功后不让 html 页面出现在表单下,您必须更改返回 HttpResponse 对象的视图或简单地更改 window.location。
所描述的方法应该适用于 django 的任何形式。
这显然是基于 webkit 的浏览器中的一个错误,这是相关线程:
这里也是相关的github问题:
https://github.com/ouhouhsami/django-progressbarupload/issues/2
要理解,webkit 不允许在上传文件时进行 ajax 调用,通常的解决方法是使用动态创建的 iframe(在上面的 SO 线程中提到)。
django_upload_url
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>File Uploader</title>
<link href="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.css" rel="stylesheet">
</head>
<body>
<button data-toggle="modal" data-target="#UploaderModal"><strong>Upload Files</strong></button>
<div class="modal" id="UploaderModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Upload Files</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="drag-drop-area"></div>
</div>
</div>
</div>
<script src="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.js"></script>
<script>
var uppy = new Uppy.Core()
.use(Uppy.Dashboard, {
inline: true,
proudlyDisplayPoweredByUppy:false,
target: '#drag-drop-area',
showProgressDetails: true,
width: 1000,
})
.use(Uppy.XHRUpload, {
endpoint: '{% url 'django_upload_url' %}',
headers: {'X-CSRFToken': " {{csrf_token}} "},
formData: true,
fieldName: "file",
limit:1
})
uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful)
location.reload();
})
</script>
</body>
</html>