dropzone基本使用

小半 • 2023年12月18日下午3:14 • 后端开发 • 阅读 267

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

生成拖拽区域

 1 <div style="width: 1078px;margin: 0 auto;border: 2px lightblue dashed;margin-top: 5px">
 2                     <div style="color: #31b0d5;font-size: 18px;text-align: center;padding: 5px 0">上传证件照片</div>
 3                     <div style="padding-left: 14px;">
 4                         <p style="font-size: 16px;color:darkgreen;font-weight: bolder">已上传文件</p>
 5                         <p id="error_msg" style="color: red"></p>
 6                         <table class="table table-hover" id="uploaded">
 7                             <tr>
 8                                 <td>文件名</td>
 9                                 <td>文件大小</td>
10                                 <td>删除已上传文件</td>
11                             </tr>
12                             {% if enrollment_obj_upload %}
13                                 {% for i,v in condition.items %}
14                                     <tr class="file-row">
15                                         <td>{{ i }}</td>
16                                         <td>{{ v }}字节</td>
17                                         <td>
18                                             <a href="{% url 'student_enrollment_upload_delete' enrollment_id %}?name={{ i }}">删除</a>
19                                         </td>
20                                     </tr>
21                                 {% endfor %}
22                             {% else %}
23                                 暂时还没有上传文件...
24                             {% endif %}
25                         </table>
26                     </div>
27 
28                     <form action="{% url 'student_enrollment_upload' enrollment_id %}" class="dropzone"
29                           id="myAwesomeDropzone">
30                         <div class="fallback">
31                             <input name="file" type="file" multiple/>
32                         </div>
33                     </form>
34                 </div>

生成js代码

 1 <script src="/static/plugins/dropzone/dropzone.js"></script>
 2     <script>
 3         $(function () {
 4             Dropzone.options.myAwesomeDropzone = false;
 5             var myDropzone = new Dropzone("#myAwesomeDropzone");
 6             myDropzone.on("success", function (file, response) {
 7                 var response = JSON.parse(response)
 8                 if (!response.status) {
 9                     $("#error_msg").text(response.msg)
10                 } else {
11                     $("#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>")
12                 }
13             });
14         })
15 
16   
17 
18         Dropzone.options.myAwesomeDropzone = {
19             paramName: "file", // The name that will be used to transfer the file
20             maxFilesize: 2, // MB
21             maxFiles: 2,
22         };
23 
24     </script>