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 checkbox 全选/反选及批量删除
Apr 28 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php实现每日签到功能
2018/11/29 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript import css实例代码
2008/07/18 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
html5与css3小应用
2013/04/03 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学前班学生评语
2014/12/29 职场文书
陕西导游词
2015/02/04 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
Python 视频画质增强
2022/04/28 Python