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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
js实现表格字段排序
Feb 19 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
详解React之key的使用和实践
Sep 29 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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笔试题
2009/08/04 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
python动态加载包的方法小结
2016/04/18 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python字典DICT类型合并详解
2017/08/17 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python for循环remove同一个list过程解析
2019/08/14 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
学历公证委托书
2014/04/09 职场文书
党务公开方案
2014/05/06 职场文书
解除租房协议书
2014/12/03 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js