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

前端之家收集整理的这篇文章主要介绍了使用Dropzone.js上传的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

form作为上传

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

<Meta charset="utf-8"> Flask upload with Dropzone example

效果

div作为上传

div作为上传区也很简单

<Meta charset="utf-8"> Flask upload with Dropzone example
上传

效果

div作为上传区配置

<Meta charset="utf-8"> Flask upload with Dropzone example
上传

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

主题

第一种

<Meta charset=="utf-8">

<div class="container" id="container">
<h2 class="lead">Configuration Demo
<div id="actions" class="row">
<div class="col-lg-7">

<span class="btn btn-success fileinput-button"&gt;
  <i class="glyphicon glyphicon-plus"&gt;</i>
  <span>Add files...</span>
</span>
<button type="submit" class="btn btn-primary start"&gt;
  <i class="glyphicon glyphicon-upload"&gt;</i>
  <span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel"&gt;
  <i class="glyphicon glyphicon-ban-circle"&gt;</i>
  <span>Cancel upload</span>
</button>

<div class="table table-striped files" id="previews">
<div id="template" class="file-row">

第二种效果与默认的一样

<Meta charset="utf-8"> Flask upload with Dropzone example

demo文件

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

dropZone.jsDropzone.js上传

猜你在找的JavaScript相关文章