dropzone基本使用

dropzone是一个实现拖拽上传文件的一个插件。

生成拖拽区域

<div style="width: 1078px;margin: 0 auto;border: 2px lightblue dashed;margin-top: 5px">
                    <div style="color: #31b0d5;font-size: 18px;text-align: center;padding: 5px 0">上传证件照片</div>
                    <div style="padding-left: 14px;">
                        <p style="font-size: 16px;color:darkgreen;font-weight: bolder">已上传文件</p>
                        <p id="error_msg" style="color: red"></p>
                        <table class="table table-hover" id="uploaded">
                            <tr>
                                <td>文件名</td>
                                <td>文件大小</td>
                                <td>删除已上传文件</td>
                            </tr>
                            {% if enrollment_obj_upload %}
                                {% for i,v in condition.items %}
                                    <tr class="file-row">
                                        <td>{{ i }}</td>
                                        <td>{{ v }}字节</td>
                                        <td>
                                            <a href="{% url 'student_enrollment_upload_delete' enrollment_id %}?name={{ i }}">删除</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                暂时还没有上传文件...
                            {% endif %}
                        </table>
                    </div>

                    <form action="{% url 'student_enrollment_upload' enrollment_id %}" class="dropzone"
                          id="myAwesomeDropzone">
                        <div class="fallback">
                            <input name="file" type="file" multiple/>
                        </div>
                    </form>
                </div>

生成js代码

<script src="/static/plugins/dropzone/dropzone.js"></script>
    <script>
        $(function () {
            Dropzone.options.myAwesomeDropzone = false;
            var myDropzone = new Dropzone("#myAwesomeDropzone");
            myDropzone.on("success", function (file, response) {
                var response = JSON.parse(response)
                if (!response.status) {
                    $("#error_msg").text(response.msg)
                } else {
                    $("#uploaded").append("<tr class='file-row'><td>" + file.name + "</td><td>" + file.size + "字节</td> <td><a href=\"{% url 'student_enrollment_upload_delete' enrollment_id %}?name=" + file.name + "\">删除</a></td> </tr>")
                }
            });
        })

  

        Dropzone.options.myAwesomeDropzone = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            maxFiles: 2,
        };

    </script>

在使用dropzone时，需要导入dropzone.css和dropzone.js.