jQuery图片拖动组件Dropzone用法示例


Posted in Javascript onJanuary 17, 2017

本文实例讲述了jQuery图片拖动组件Dropzone用法。分享给大家供大家参考,具体如下:

dropzone 主要功能:支持拖动图片上传,提供图片预览,等功能 参考地址:http://www.dropzonejs.com

1. 安装 npm install dropzone ,会下载一个dropzone

2. dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上

3. 初始化Dropzone ,demo代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery.min.js"></script>
  <script src="dropzone.min.js"></script>
  <link rel="stylesheet" href="dropzone.css">
</head>
<body>
<div id="dropz" class="dropzone"></div>
<script>
  $(function () {
    $("#dropz").dropzone({
      url: "fileUpload.htm",
      maxFiles: 10,
      maxFilesize: 512,
      acceptedFiles: ".jpg"
    });
  })
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
一个可复用的vue分页组件
May 15 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
js生成随机数方法和实例
Jan 17 #Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 #Javascript
js实现手机拍照上传功能
Jan 17 #Javascript
angular实现form验证实例代码
Jan 17 #Javascript
基于jQuery实现数字滚动效果
Jan 16 #Javascript
5种JavaScript脚本加载的方式
Jan 16 #Javascript
WebPack基础知识详解
Jan 16 #Javascript
You might like
初品cakephp 入门基础
2012/02/16 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP的几个常用加密函数
2016/02/03 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
web打印小结
2017/01/11 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python利用tkinter实现屏保
2019/07/30 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
电子信息毕业生自荐信
2013/11/16 职场文书
高中数学教学反思
2014/01/30 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
小学生操行评语大全
2014/04/22 职场文书
企业标语口号
2014/06/10 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
学校运动会广播稿
2014/10/11 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server