zoukankan      html  css  js  c++  java
  • dropzone基本使用

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

    生成拖拽区域

     1 <div style=" 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>

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

  • 相关阅读:
    关于hive Metadata 使用 MsSQL
    hdp 2.06 安装备忘
    对于自我管理 ObjectContextManager的测试
    关于 Linq to EF 的内存泄漏问题
    使用过多的递归出现错误,“System.StackOverflowException”类型的未经处理的异常在 mscorlib.dll 中发生
    PowerShell 如何 远程连接【转】
    win7系统浏览器老是自动弹出网页怎么办
    win10如何深度清理C盘
    Win7电脑系统崩溃怎么解决?
    win7磁盘打不开如何解决
  • 原文地址:https://www.cnblogs.com/sun-10387834/p/12679063.html
Copyright © 2011-2022 走看看