文件上傳插件dropzone
阿新 • • 發佈:2018-07-25
定位 ces mov radi multiple form () itl acc
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 Library
register = Library()
@register.simple_tag
def 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 os from django import conf from django.shortcut import render,HttpResponse import json def 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 conf import os enrollment_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