1、相关下载
- 下载
dropzone.js文件：https://gitlab.com/meno/dropzone/-/jobs/79974233/artifacts/file/dist/dropzone.js dropzone.css:f12取出样式并保存至static/css目录即可；
2、前端样式加载
<hr><p>已上传文件</p> <ul style="margin-top: 20px" id="upload_file_list"> ???{# 此处 f 为文件名称，先取出对应文件夹的文件名称列表 ?#} ???{% for f in upload_files %} ???????<li id="{% replace_str f %}">{{ f }}<span class="btn delete_btn" style="color: red">删除</span></li> ???{% endfor %}</ul>{# ??#}<form action="{% url 'enroll_file_upload' student_enroll.id %}" class="dropzone" id="myAwesomeDropzone"> ???{% csrf_token %} ???<div class="fallback"> ???????<input name="file" type="file" multiple /> ???</div></form><style> ???<link rel="stylesheet" href="{% static 'css/dropzone.css' %}"> ???????.dropzone { ???????border: 2px dashed #0087F7; ???????border-radius: 5px; ???????background: white; ???????min-height: 150px; ???????padding: 54px 54px; ???}</style><script src="{% static 'js/dropzone.js' %}"></script><script>Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误$(".dropzone").dropzone({ ???url: "{% url 'enroll_file_upload' student_enroll.id %}", ???addRemoveLinks: true, ???dictRemoveLinks: "x", ???dictCancelUpload: "x", ???paramName:"file", ???maxFiles: 10, ?// 限定每次上传的文件数量 ???maxFilesize: 4, // 限定大小 ???acceptedFiles: ".jpg,.iepg,.png", ?// 限定格式 ???init: function() { ???????//res为服务器响应回来的数据 ???????this.on("success", function(file, res) { ???????????//将json字符串转换成json对象 ???????????var obj = JSON.parse(res); ???????????var file_name = file.name ???????????console.log(file,res) ???????????if( obj.status ){ ???????????????// 删除对应的文件，指定文件id，方便后续删除 ???????????????$('#upload_file_list').append('<li id='+file_name.replace(".","_")+'>'+file.name+ ???????????????????'<span class="btn delete_btn" style="color: red">删除</span></li>'); ???????????}else{ ???????????????alert('上传失败'); ???????????} ???????}); ???????this.on("removedfile", function(file) { ???????????console.log(file.name); ???????????var stu_id = {{ student_enroll.id }} ???????????$.ajax({ ???????????????// 方便通过文件名称删除文件 ?????????????url: "/crm/enroll/file_delete/"+stu_id+"/"+file.name+'/', ?????????????type: "get", ???????????????success:function (data) { ?????????????????data = JSON.parse(data) ???????????????????if(data.status){ ?????????????????????alert('删除成功') ???????????????????????alert(data.file_id) ???????????????????????// 在列表页也执行删除操作，但是怎么定位标签？ ???????????????????????console.log( $('#'+data.file_id)) ???????????????????????$('#'+data.file_id).remove() ???????????????????} ???????????????????else { ?????????????????????alert(data.error_msg) ???????????????????} ???????????????} ???????????}); ???????}); ???}});// 删除文件$('#upload_file_list').on('click','span',function () { ???$(this).parent().remove() ???var stu_id = {{ student_enroll.id }}; ???console.log(stu_id) ???var s = $(this).parent().text() ???var file_name= s.substring(0,s.length-2) ???console.log(file_name) ???$.ajax({ ???????// 方便通过文件名称删除文件 ???????url: "/crm/enroll/file_delete/"+stu_id+"/"+file_name+'/', ???????type: "get", ???????success:function (data) { ???????????data = JSON.parse(data) ???????????if(data.status){ ???????????????alert('删除成功') ???????????????// 在列表页也执行删除操作，但是怎么定位标签？ ???????????????console.log( $('#'+data.file_id)) ???????????????$('#'+data.file_id).remove() ???????????} ???????????else { ???????????????alert(data.error_msg) ???????????} ???????} ???});}) ????????</script>4、自定义标签，生成li的id属性使用
from django.template import Libraryregister = Library()@register.simple_tagdef replace_str(s): ???return str(s).replace('.','_')5、路由配置
url(r'^enroll/(\d+)/file_upload/$', views.enroll_file_upload, name='enroll_file_upload'),6、文件上传路径配置settings.py
ORM_PATH_DIR = os.path.join(BASE_DIR,'crm/upload_files/enrollment_data/')7、视图函数
# 上传文件配置import osfrom django import conffrom django.shortcut import render,HttpResponseimport jsondef enroll_file_upload(request, enrollment_id): ???# 保存文件，对应的文件夹存在则保存至文件夹内，不存在则先创建文件夹 ???enrollment_upload_dir = os.path.join(conf.settings.ORM_PATH_DIR, enrollment_id) ???if not os.path.isdir(enrollment_upload_dir): ???????os.mkdir(enrollment_upload_dir) ???file_obj = request.FILES.get('file') ???????# 限定上传的文件数量为2 ???if len(os.listdir(enrollment_upload_dir)) <= 2: ???????with open(os.path.join(enrollment_upload_dir, file_obj.name), "wb") as f: ???????????for chunks in file_obj.chunks(): ???????????????f.write(chunks) ???else: ???????return HttpResponse(json.dumps({'status': False, 'err_msg': '最多上传两次'})) ???return HttpResponse(json.dumps({'status': True, })) ???# ?删除文件配置def enroll_file_delete(request,stu_id,file_name): ???file_path = os.path.join(conf.settings.ORM_PATH_DIR,stu_id,file_name) ???if os.path.exists(file_path): ???????os.remove(file_path) ???????if request.is_ajax(): ???????????return HttpResponse(json.dumps({'status':True,'file_id':str(file_name).replace('.','_')})) ???????return ???else: ???????print('no such file:%s' % file_path) ???????return HttpResponse(json.dumps({'status':False,'error_msg':'没有找到此文件'}))// 取出对应文件夹内容列表,放在主视图函数中from django import confimport osenrollment_upload_dir = os.path.join(conf.settings.ORM_PATH_DIR,id)if os.path.isdir(enrollment_upload_dir): ???upload_files=os.listdir(enrollment_upload_dir)文件上传插件dropzone
原文地址：https://www.cnblogs.com/fqh202/p/9365340.html