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的数据类型(示例代码)
Dec 11 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
JS实现评价的星星功能
Aug 20 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php适配器模式介绍
2012/08/14 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python入门之后再看点什么好?
2018/03/05 Python
详解python如何引用包package
2020/06/07 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
田径运动会开幕式及主持词
2014/03/28 职场文书
应届毕业生求职信
2014/05/26 职场文书
社区戒毒工作方案
2014/06/04 职场文书
大学生求职信
2014/06/17 职场文书
低碳环保演讲稿
2014/08/28 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
数学复习课教学反思
2016/02/18 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
python正则表达式re.search()的基本使用教程
2021/05/21 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript