使用Dropzone.js上传的示例代码

本文介绍了使用Dropzone.js上传的示例代码，分享给大家，具体如下：

说明：后台用的python的flask框架，后台对你理解这篇文章没什么影响，你可以使用php

form作为上传区

引入Dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成

效果

div作为上传区

div作为上传区也很简单

  
  
  
  
  


点我上传

   

效果

form作为上传区配置

配置也分为两种，如果使用的form表单上传的就用如下方式配置

效果

div作为上传区配置

  
  
  
  
  


 点我上传

   

说明：关于其他的配置请看最后的链接

主题

第一种

 
 
 
 
 
 
 
 
 
  html, body {
   height: 100%;
  }
  #actions {
   margin: 2em 0;
  }
  
  div.table {
   display: table;
  }
  div.table .file-row {
   display: table-row;
  }
  div.table .file-row > div {
   display: table-cell;
   vertical-align: top;
   border-top: 1px solid #ddd;
   padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
   background: #f9f9f9;
  }
  
  #total-progress {
   opacity: 0;
   transition: opacity 0.3s linear;
  }
  
  #previews .file-row.dz-success .progress {
   opacity: 0;
   transition: opacity 0.3s linear;
  }
  
  #previews .file-row .delete {
   display: none;
  }
  
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
   display: none;
  }
  #previews .file-row.dz-success .delete {
   display: block;
  }
 


 
 
  
Configuration Demo
  
   
    
    
      
      Add files...
    
    
      
      Start upload
    
    
      
      Cancel upload
    
   
   
    
    
     
      
     
    
   
  
  
  
  
   
    
      
    
    
      

      
    
    
      

      
 
      
    
    
     

Start
     
     

Cancel
     
     
      
      Delete
     
    
   
  

第二种效果与默认的一样

  
  
  
  
  





  
    
    
      
      
    
    
    ✔
    ✘
    
  

   
   

demo文件

如果是flask框架可进行测试点击此处下载，如果是php或者其他就看看不必下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。