今天碰到一个需求，页面上有“点击上传”的按钮，点击可以执行上传事件，从桌面拖拽图片拖拽到任何地方，都可以执行上传，且不影响点击按钮事件。下面是简单示例：

简单示例如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="{CHARSET}">

		<title></title>

		<link href="https://cdn.bootcss.com/dropzone/5.4.0/min/dropzone.min.css" rel="stylesheet">

		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<script type="text/javascript" src="https://cdn.bootcss.com/dropzone/5.4.0/min/dropzone.min.js"></script>

		<style>

			html,body{

				margin: 0;

				padding: 0;

				background-color: #F5F8F9;

			}

			body{

				position: absolute;

				width: 100%;

				height: 100%;

			}

			.dropz{

				width: 300px;

				height: 400px;

				border-radius: 5px;

				background-color: #fff;

				margin: 50px auto;

				box-shadow: 1px 1px 5px rgba(0,0,0,.5);

			}

			.logo{

				width: 100px;

				height: 100px;

				margin: 40px 100px;

			}

			.btns{

				width: 150px;

				height: 40px;

				border-radius: 50px;

				margin: 40px 75px;

				color: #fff;

				text-align: center;

				line-height: 40px;

				font-size: 20px;

				cursor: pointer;

			}

			.sure-btn{

				background-color: cadetblue;

				margin-bottom: 20px;

			}

			.file-upload{

				background-color: #dc7e6e;

				margin-top: 20px;

			}

			.dz-preview{

				display: none;

			}

		</style>

	</head>

	<body id="dropz">

		<div class="dropz" class="dropzone">

			<img class="logo" src="#"  />

			<div class="btns sure-btn">保存</div>

			<div class="btns file-upload">点击上传</div>

		</div>

		<script>

			$(function(){

				var dropz = new Dropzone("#dropz,.file-upload", {

					url: "#",

					maxFiles: 1,

					maxFilesize: 1,

					acceptedFiles: ".jpg,.jpeg,.png",

					parallelUploads: 1,

					init: function() {

						this.on("addedfile", function(file) {

							setTimeout(function(){

								document.querySelector('.logo').src = file.dataURL;

							}, 3000);

						});

						this.on("success", function(file) {

							console.log("File " + file.name + "uploaded");

						});

					}

				});

				$(document).on('click','#logo_upload',function(){

					$('#dropz').click();

				})

				var uploadable = false;

				$('#dropz').click(function(ev){

					if(!uploadable){

						return false;

					}else{

						uploadable = false;

					}

				})

				$('.file-upload').click(function(){

					uploadable=true;

					$('#dropz').click();

				})

			})

		</script>

	</body>

</html>

　　

Dropzone.js拖拽上传（简单示例）的更多相关文章

  1. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  2. html5原生js拖拽上传（golang版）

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

  3. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  4. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  5. DropzoneJS 可以拖拽上传的js库

    介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload   http://blueimp.github.io/jQu ...

  6. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  7. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

随机推荐

  1. [springboot 开发单体web shop] 4. Swagger生成Javadoc

    Swagger生成JavaDoc 在日常的工作中,特别是现在前后端分离模式之下,接口的提供造成了我们前后端开发人员的沟通 成本大量提升,因为沟通不到位,不及时而造成的[撕币]事件都成了日常工作.特别是 ...

  2. 关于self

    关于self 就像C++的this 但是不同之处是他不是关键字,只代表第一个参数,可以用任何一个普通变量代替 self在对象的方法中表示当前对象本身,如果通过对象调用一个方法,那么该对象会自动传入到当 ...

  3. CSPS模拟 86

    看见异或两个字就孩怕 T1 按位? T2 这道异或稍水啊233 貌似可以打表找找规律 emm七种转移,有重复刷表 优化一下? T3 skyh已经接了2杯水了(实际情况他已经ak了) cbx开始抬头傻笑 ...

  4. NOIP模拟 35

    int乘爆见祖宗 难得地T3暴力打满 T1T2思路也都正确 然而T2没看出一个int乘爆直接滚粗.. 这谁抗的住啊... 跟天皇说我差点就rank1了 换来的只有一张奸笑的大脸和一堆垃圾的嘲讽 真巨啊 ...

  5. 中文企业云操作系统 CecOS

    CecOS介绍 CecOS(原中文企业云操作系统.第一个版本基于oVirt 3.0,后续在此基础上不断升级迭代拓展至今,已形成基于基础底层和应用功能拓展集成在内的10款产品和四大平台),旨在通过先进的 ...

  6. [转载]1.2 UiPath第一个案例Hello World

    1.弹出框Hello World 在弹出的窗口中创建序列 在新建的序列中,在搜索框中输入“Message Box”,Studio自动搜索出结果. 选中“Message Box”,然后拖拽到界面带+号区 ...

  7. MySQL-配置环境变量及修改密码（附-mysql安装教程）

    MySQL-配置环境变量和修改密码 mysql的安装教程:链接:https://pan.baidu.com/s/1rrPT2X0yRF58kN8jZZx-Mg 密码:55dh 一. 闪退问题 1.1. ...

  8. MySQL InnoDB MVCC

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  9. MySQL数据库之MyISAM与InnoDB的区别

    MySQL数据库之MyISAM与InnoDB的区别 从以下几个方面: 1.存储结构 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义 ...

  10. 使用idea来部署git项目

    使用idea来部署git项目 一).将项目交由git管理 VCS ---->import into Version Cntorl ------>create Git Repository ...