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代码)
Oct 29 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
node.js中的require使用详解
Dec 15 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
如何选择适合你的JavaScript框架
2017/11/20 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[08:40]Navi Vs Newbee
2018/06/07 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python多进程操作实例
2014/11/21 Python
分析python切片原理和方法
2017/12/19 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python+flask实现API的方法
2018/11/21 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
互动出版网:专业书籍
2017/03/21 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
医院护士的求职信范文
2013/12/26 职场文书
爱情检讨书大全
2014/01/21 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书