Dropzone.js实现文件拖拽上传功能(附源码下载)

dropzone.js是一个开源的JavaScript库，提供 AJAX 异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。

效果演示      源码下载

使用Dropzone

我们可以建立一个正式的上传form表单，并且给表单一个.dropzone的class。

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

就这样，Dropzone会自动找到.dropzone的表单form元素，并且通过action属性，上传到后台接收文件的程序，如upload.php，就像接受一个很普通的file input表单:

<input type="file" name="file" />

然后，在你的upload.php中写上传代码，Dropzone官网下载的只有js代码，没有后台的上传代码，不过，helloweba.com为您提供了php版的完整上传实例代码，欢迎下载源码。

接下来就是引入dropzone.js了。

<script src="dropzone.min.js"></script>

然后什么都不用做了，打开浏览器，测试拖拽上传效果。当然样式你可以自己写，也可以参照我们的实例代码。

还有一种情况，我们不希望上传的html中有form表单，那么好，我们只要在html中放置一个div#mydropzone

<div id="mydropzone" class="dropzone"></div>

然后，配置一下js调用：

var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

如果您使用的是jquery，那么jQuery版的可以这样调用：

$("#dropz").dropzone({
url: "upload.php"
})

运行你的网页，是不是一样可以看到上传效果。

配置Dropzone

Dropzone的特色就在于非常灵活，提供了许多可选项、事件等。下面是Dropzone几个常用的配置项。

url：最重要的参数，指明了文件提交到哪个页面。

method：默认为post，如果需要，可以改为put。

paramName：相当于<input>元素的name属性，默认为file。

maxFilesize：最大文件大小，单位是 MB。

maxFiles：默认为null，可以指定为一个数值，限制最多文件数量。

addRemoveLinks：默认false。如果设为true，则会给文件添加一个删除链接。

acceptedFiles：指明允许上传的文件类型，格式是逗号分隔的 MIME type 或者扩展名。例如：image/*,application/pdf,.psd,.obj

uploadMultiple：指明是否允许 Dropzone 一次提交多个文件。默认为false。如果设为true，则相当于 HTML 表单添加multiple属性。

headers：如果设定，则会作为额外的 header 信息发送到服务器。例如：{"custom-header": "value"}

init：一个函数，在 Dropzone 初始化的时候调用，可以用来添加自己的事件监听器。

forceFallback：Fallback 是一种机制，当浏览器不支持此插件时，提供一个备选方案。默认为false。如果设为true，则强制 fallback。

fallback：一个函数，如果浏览器不支持此插件则调用。

以上所述是小编给大家介绍的Dropzone.js实现文件拖拽上传，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • Java实现拖拽文件上传dropzone.js的简单使用示例代码

    Java实现拖拽文件上传dropzone.js的简单使用示例代码

    Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzonejs.com/, 中文手册是:http://wxb.github.io/dropzonejs.com.zh-CN/ 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: jsp页面: 1. 首先必须引入dropzone的js和css文件 <link rel="stylesheet&

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • Vue移动端右滑屏幕返回上一页附源码下载

    有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验.Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件.使用它可以轻松实现屏幕触控.滑动触发事件,提高用户体验.本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页. 查看演示  下载源码 安装依赖 使用npm安装vue-directive-touch组件. npm install vue-directive-touch --save 引入组件 在main.js中引入vue-directive-touch.

  • JS实现的文件拖拽上传功能示例

    JS实现的文件拖拽上传功能示例

    本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:

  • js实现超酷的照片墙展示效果图附源码下载

    js实现超酷的照片墙展示效果图附源码下载

    这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3

  • 前端页面文件拖拽上传模块js代码示例

    前端页面文件拖拽上传模块js代码示例

    最近给卫生局做一个表格上传/可视化系统,算是小有成果.今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见. gitHub地址:https://github.com/codeplay2015/dragToUpload 由于代码中我的注释很详尽,所以具体逻辑实现及不介绍了,大家直接看代码及能明白.现在简单列一个功能清单和一些用到的知识点清单: 模态框 文件的批量上传 使用formData API 封装数据 并通

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • JS实现快速的导航下拉菜单动画效果附源码下载

    JS实现快速的导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

  • 不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

随机推荐