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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
定义select的边框颜色
Apr 28 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
webpack4简单入门实例
2018/09/06 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python http基本验证方法
2018/12/26 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python如何查看安装了的模块
2020/06/23 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
2014年社区植树节活动方案
2014/02/28 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
Django如何与Ajax交互
2021/04/29 Python
python playwright 自动等待和断言详解
2021/11/27 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers