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取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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中类与对象功能、用法实例解读
2020/03/27 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python写的一个文本编辑器
2014/01/23 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python创建和删除目录的方法
2015/04/29 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python 元组操作总结
2019/09/18 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
道路建设实施方案
2014/03/18 职场文书
婚假请假条怎么写
2014/04/10 职场文书
教师个人自我评价范文
2014/04/13 职场文书
服务理念标语
2014/06/18 职场文书
大一学生个人总结
2015/02/15 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python