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

简单示例如下：

<!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. Kali Linux——迈向网络攻防

    自从进入大三的课程后,在已学的高数.线代.数论.概率论.信息论.通信等知识的技术上,开始了网络信息安全.网      络攻防的学习.俗话说得好,磨刀不误砍柴工,开始网络攻防之旅也势必要一个好的工具.然 ...

  2. 五、docker-compose开锋（docker 三剑客）

    前言 终于写到docker-compose了,其实我最开始接触docker的时候,是因为一个开源项目需要用docker 环境和docke-compose 所以我最先接触的是docker-compse ...

  3. P3067 [USACO12OPEN]平衡的奶牛群（折半暴搜）

    暴搜无疑.... 首先考虑纯暴搜...... 考虑每一个数: 选在左边集合 选在右边集合 不选 一共三种情况,用一个数组记录搜到的答案,所以暴搜是3^N的复杂度...直接死亡 于是讲折半暴搜.... ...

  4. NOIP 模拟19

    考试状态一次不如一次,所以这次.......我经无言以对 考完试T1就A了,但不是考试时A的,所以屁用没有! 这次考试其实T1想的是正解但是自己傻逼了,感觉自己只能拿部分分,(而且我还把数据范围少看一 ...

  5. 由浅入深——从ArrayList浅谈并发容器

    原创作品转载请附:https://www.cnblogs.com/superlsj/p/11655523.html 一.一个案例引发的思考 public class ArrayListTest { p ...

  6. java中 equals和==区别

    一.java当中的数据类型和“==”的含义: 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,boolean.他们之间的比较,应用双等号 ...

  7. arduino体感控制简单版

    https://learn.sparkfun.com/tutorials/apds-9960-rgb-and-gesture-sensor-hookup-guide/all 硬件连线 关键 VCC=  ...

  8. lqb 基础练习 数列特征

    基础练习 数列特征 时间限制:1.0s   内存限制:256.0MB     问题描述 给出n个数,找出这n个数的最大值,最小值,和. 输入格式 第一行为整数n,表示数的个数. 第二行有n个数,为给定 ...

  9. Mybatis动态SQL（where元素、set元素、if元素）

    Mybatis动态SQL(where元素.set元素.if元素) - where 元素只会在至少有一个子元素的条件返回 SQL 子句的情况下才去插入“WHERE”子句.而且,若语句的开头为“AND”或 ...

  10. 记录工作遇到的死锁问题(Lock wait timeout exceeded; try restarting transaction)

    1.问题背景 刚来新公司不久,对业务还不太熟悉,所以领导先安排我维护原有系统.大概介绍下项目背景,项目分为核心业务部分在项目A中,与第三方交互的业务在项目B中,前端发起请求调用A项目接口,并在A项目中 ...