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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Python中的字典遍历备忘
2015/01/17 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python em算法的实现
2020/10/03 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
异步传递消息系统的作用
2016/05/01 面试题
小学社会实践活动总结
2014/07/03 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
杭白菊导游词
2015/02/10 职场文书
公司催款律师函
2015/05/27 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
如何基于python实现单目三维重建详解
2022/06/25 Python