文件上传插件dropzone

Posted 2020-12-25 fqh202

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)