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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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操作mysql数据库的基本类代码
2014/02/25 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP反射基础知识回顾
2020/09/10 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
Node.js的特点详解
2017/02/03 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python变量作用范围实例分析
2015/07/07 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python三引号输出方法
2019/02/27 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
《春笋》教学反思
2014/04/15 职场文书
技术员岗位职责
2015/02/04 职场文书
跑吧孩子观后感
2015/06/10 职场文书
redis中lua脚本使用教程
2021/11/01 Redis