django 上传文件进度条

最新推荐文章于 2025-06-21 13:22:46 发布

原创最新推荐文章于 2025-06-21 13:22:46 发布 · 4.9k 阅读

9 ·

CC 4.0 BY-SA版权

django 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何在Django框架下实现文件上传时显示进度条的功能，通过参考相关教程和资源，详细讲解了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function on_progress(evt) {       //看这个函数之前先看upload函数。这个函数可以接收一个evt(event)对象(细节自行查询progress)，他有3个属性lengthComputable，loaded，total，第一个属性是个bool类型的，代表是否支持，第二个代表当前上传的大小，第三个为总的大小，由此便可以计算出实时上传的百分比
			if(evt.lengthComputable) {
				var ele = document.getElementById('2');
				var percent = Math.round((evt.loaded) * 100 / evt.total);
				ele.style.width = percent + '%';
				document.getElementById('3').innerHTML = percent + '%';
			}
		}
		function upload() {
			var xhr = new XMLHttpRequest();
			var file = document.getElementById('file').files[0];   //取得文件数据，而.file对象只是文件信息
            console.log(file);
			var form = new FormData();   //FormData是HTML5为实现序列化表单而提供的类，更多细节可自行查询
            form.append('file',file);   //这里为序列化表单对象form添加一个元素，即file
			xhr.upload.addEventListener('progress',on_progress,false);     //xhr对象含有一个upload对象，它有一个progress事件，在文件上传过程中会被不断触发，我们为这个事件对应一个处理函数，每当事件触发就会调用这个函数，于是便可利用这个函数来修改当前进度，更多细节可自行查询
			xhr.open('POST','http://127.0.0.1/load/upload/',true);  //请将url改成上传url
            xhr.setRequestHeader('X-CSRFTOKEN','{{ request.COOKIES.csrftoken }}');   //此处为Django要求，可无视，或者换成相应后台所要求的CSRF防护，不是django用户请去掉
			xhr.send(form);   //发送表单
		}
	</script>
</head>
<body>
	<form>
        {% csrf_token %}
		<div id='1' style="height:20px;width:100px;border:2px solid gray;float:left;margin-right:10px;">
			<div id='2' style="height:100%;width:0px;background:gray;"></div>

		</div>
		<b style="margin-right:20px" id='3'>0%</b>

		<input type="file" id='file' class='file' name="file"><br><br>
		<button type="button" onclick="upload();">上传</button>

	</form>
</body>
</html>

view.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render,HttpResponse
from django.views.generic import View

# Create your views here.
class UploadPage(View):
    def get(self,request):
        return render(request,'upload.html')

class Upload(View):
    def post(self,request):
        file = request.FILES['file']
        self.handle_uploaded_file(file)
        return HttpResponse()

    def handle_uploaded_file(self,f):
        with open(r'C:\\Users\\Desktop\\modeluser\\upload_file.txt', 'wb+') as destination:
            for chunk in f.chunks():
                destination.write(chunk)

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^load/', include('books.urls')),
]

from django.conf.urls import url,include
from views import *

urlpatterns = [
    url(r'upload_page/', UploadPage.as_view()),
    url(r'upload/', Upload.as_view()),
]

参考：https://blog.youkuaiyun.com/AC_hell/article/details/52832027

https://www.jb51.net/article/140988.htm