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 单选框,多选框美化代码
Aug 01 Javascript
Firefox div高度自适应
Apr 28 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
微信公众平台天气预报功能开发
2014/07/06 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
浅谈js闭包理解
2019/03/28 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python循环输出三角形图案的例子
2019/11/22 Python
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
初任培训自我鉴定
2013/10/07 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
合同补充协议书
2016/03/24 职场文书