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

简单示例如下:

<!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. Linux 如何创建或删除以横杠(-)开头的文件或目录

    小测试: [root@test test]# ls [root@test test]# touch -abc touch: invalid option -- 'b' Try `touch --hel ...

  2. C语言作业007

    问题 答案 这个作业属于那个课程 C语言程序设计1 这个作业要求在哪里 我在这个课程的目的是 学习并掌握C语言 这个作业在那个具体方面帮助我实现目标 参考文献 四 作业格式 1PTA作业贴图 1.1题 ...

  3. Elasticsearch 技术分析(八):剖析 Elasticsearch 的索引原理

    前言 创建索引的时候,我们通过Mapping 映射定义好索引的基本结构信息,接下来我们肯定需要往 ES 里面新增业务文档数据了,例如用户,日志等业务数据.新增的业务数据,我们根据 Mapping 来生 ...

  4. Kubernetes3-kubectl管理Kubernetes容器平台-2

    一.kubectl管理集群中deployment资源与service服务 1.相关参数 kubectl edit 编辑服务器侧资源 kubectl replace 替换,使用 yaml 配置文件来替换 ...

  5. python 读取文件路径

    python 读取文件路径 一定要用绝对路径不能用相对路径 不然读取不出来 <pre>img = cv.imread("F:\\wef\\wef\\jiaoben\\e\\1.j ...

  6. 小程序 数字过千 以K显示

    先新建一个 wxs 文件 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. ...

  7. nyoj 822-画图 (*)

    822-画图 内存限制:64MB 时间限制:1000ms 特判: No 通过数:133 提交数:187 难度:0 题目描述: 计算机画图也挺有趣的哈!那我们就来用计算机画幅图吧... 输入描述: 输入 ...

  8. npm报错:无法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本

    npm报错 在 windows终端输入 vue init webpack app, 创建一个名为 app 的 Vue 项目时报错如下: 无法加载文件 D:\nodejs\node_global\web ...

  9. python:模块0

    一.模块是更高级的封装: 容器:数据的封装 函数:语句的封装 类   :方法和属性的封装 模块:模块就是程序,即每个.py文件 二.引入 import 模块名 from 模块名 import xx(函 ...

  10. Windows 10上源码编译Poco并编写httpserver和tcpserver | compile and install poco cpp library on windows

    本文首发于个人博客https://kezunlin.me/post/9587bb47/,欢迎阅读! compile and install poco cpp library on windows Se ...