使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码，分享给大家，具体如下：
说明：后台用的python的flask框架，后台对你理解这篇文章没什么影响，你可以使用php
form作为上传区
引入Dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<!-- 第一种上传 -->
<form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data"></form>
<!-- 第一种上传 -->
</body>
</html>
效果
div作为上传区
div作为上传区也很简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 800px; height: 300px;">点我上传</div>
<script type="text/javascript">
//下面两行是js和jquery的方式实现绑定div的例子，你选择一种即可
//var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
$("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
</script>
</body>
</html>
效果
form作为上传区配置
配置也分为两种，如果使用的form表单上传的就用如下方式配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<script type="text/javascript">
//两种配置方式，第一种，表单上传时的配置方式，可以打开form表单的注释，myAwesomeDropzone是表单的id
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name != "justinbieber.jpg") {
done("Naha, you don't.");
}else {
done();
}
}
};
</script>
</body>
</html>
效果
div作为上传区配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 800px; height: 300px;">点我上传</div>
<script type="text/javascript">
//第二种配置，这种使用的是div做上传区域时使用的配置
Dropzone.autoDiscover = false;//不知道该行有什么用，欢迎高手下方评论解答
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024
});
</script>
</body>
</html>
说明：关于其他的配置请看最后的链接
主题
第一种
<!DOCTYPE html>
<html>
<head>
<meta charset=="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" >
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="external nofollow" >
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
</script>
<style>
html, body {
height: 100%;
}
#actions {
margin: 2em 0;
}
/* Mimic table appearance */
div.table {
display: table;
}
div.table .file-row {
display: table-row;
}
div.table .file-row > div {
display: table-cell;
vertical-align: top;
border-top: 1px solid #ddd;
padding: 8px;
}
div.table .file-row:nth-child(odd) {
background: #f9f9f9;
}
/* The total progress gets shown by event listeners */
#total-progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the progress bar when finished */
#previews .file-row.dz-success .progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the delete button initially */
#previews .file-row .delete {
display: none;
}
/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
display: none;
}
#previews .file-row.dz-success .delete {
display: block;
}
</style>
</head>
<body>
<div class="container" id="container">
<h2 class="lead">Configuration Demo</h2>
<div id="actions" class="row">
<div class="col-lg-7">
<!-- 控制总体的三个按钮 -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
</div>
<div class="col-lg-5">
<!-- 总体的进度 -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</span>
</div>
</div>
<!--
data-dz-thumbnail：使用后代表该标签是存放缩略图的标签【这里必须是一个 <img /> 元素 ，并且alt 和 src 属性将被 Dropzone改变】
data-dz-name：存放文件名
data-dz-errormessage：存放错误信息
data-dz-size：存放文件大小
data-dz-remove ：删除队列中的文件，或者取消正在从队列上传到服务器的文件
data-dz-uploadprogress：上传进度【( 当这里有一个 uploadprogress事件时， Dropzone 将更改 style.width 属性从 0% 到 100% )】
-->
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name ></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
<script>
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
//开始先删除单个文件的布局
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // 指定拖拽区为body
url: "{{ url_for('upload_file') }}", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // 当队列有文件，是否立刻自动上传到服务器
previewsContainer: "#previews", // 指定存放文件队列区
clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片，默认是previewsContainer指定的区域
});
myDropzone.on("addedfile", function(file) {
// 让模版中的单个文件可以点击上传
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// 显示所有文件整体上传进度1-100
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// 显示整体的上传的进度条，说明：原来是0，所以上面的style.width = progress + "%"即使是100%也看不到
document.querySelector("#total-progress").style.opacity = "1";
// 失效上传按钮
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// 当没有文件上传时，隐藏进度条
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// 上传所有
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());
//myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));与上面一样，可查看源码对比
};
//取消所有
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
</script>
</body>
</html>
第二种效果与默认的一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 500px; height: 300px;"></div>
<div id="aaa"></div>
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview ">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;//解决两次实例Dropzone错误，可在控制台看到该错误
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的
autoQueue: true,
init: function() {
this.on("addedfile", function(file) {
$(".start").click (function() {
this.enqueueFile(file);
})
});
}
});
</script>
</body>
</html>
demo文件
如果是flask框架可进行测试点击此处下载，如果是php或者其他就看看不必下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
Java实现拖拽文件上传dropzone.js的简单使用示例代码
Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzonejs.com/, 中文手册是:http://wxb.github.io/dropzonejs.com.zh-CN/ 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: jsp页面: 1. 首先必须引入dropzone的js和css文件 <link rel="stylesheet&
-
使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
-
vue中实现图片和文件上传的示例代码
html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');
-
Vue项目实现html5图片上传的示例代码
目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选
-
SpringBoot文件分片上传的示例代码
目录 背景 文件MD5计算 文件分片切割 文件分片接收 检查分片 保存分片 合并分片 云文件分片上传 阿里云OSS 华为云OBS Minio 背景 最近好几个项目在运行过程中客户都提出文件上传大小的限制能否设置的大一些,用户经常需要上传好几个G的资料文件,如图纸,视频等,并且需要在上传大文件过程中进行优化实时展现进度条,进行技术评估后针对框架文件上传进行扩展升级,扩展接口支持大文件分片上传处理,减少服务器瞬时的内存压力,同一个文件上传失败后可以从成功上传分片位置进行断点续传,文件上传成功后再次上
-
Vue+NodeJS实现大文件上传的示例代码
目录 整体思路 项目演示 前端界面 文件切片 hash计算 查询切片状态 切片上传(断点续传) 文件总体上传进度 合并文件 优化 请求并发数控制 hash值计算优化 常见的文件上传方式可能就是new一个FormData,把文件append进去以后post给后端就可以了.但如果采用这种方式来上传大文件就很容易产生上传超时的问题,而且一旦失败还得从新开始,在漫长的等待过程中用户还不能刷新浏览器,不然前功尽弃.因此这类问题一般都是通过切片上传. 整体思路 将文件切成多个小文件 hash计算,需要计算一
-
React Native使用fetch实现图片上传的示例代码
本文介绍了React Native使用fetch实现图片上传的示例代码,分享给大家,具体如下: 普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {J
-
Java实现一个简单的文件上传案例示例代码
Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘中 下面上代码 上传单个文件 服务器端 package FileUpload; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.Serve
-
阿里云OSS域名配置及简单上传的示例代码
目前开发系统,附件文件一般都会使用第三方的存储空间来保存,一方面是为了开发者提供便利,另一方可以减轻系统的访问压力,下面介绍一下阿里云的OSS的一些简单配置和使用. 一.阿里云OSS配置 前提:你需要购买阿里云的OSS服务器,这里就不多介绍:你需要有一个备案域名,此处也不多介绍(本人使用的阿里云进行备案的域名). 1. 阿里云OSS配置域名 1)创建bucket 2)选择tpw-bucket的"域名管理",然后点击绑定用户域名: 3)创建域名: 此处创建二级域名进行绑定,如果你想简单,
-
SpringBoot整合腾讯云COS对象存储实现文件上传的示例代码
目录 1.开通腾讯云对象存储服务 2.创建存储桶 3.密钥管理,新建密钥 4.yml配置密钥.COS信息 5.COSConfig配置类 6.COS文件上传工具类 7.Controller测试上传接口: 8.PostMan接口调用 9.浏览器预览效果 企业级项目开发中都会有文件.图片.视频等文件上传并能够访问的场景,对于初学者Demo可能会直接存储在应用服务器上:对于传统项目可能会单独搭建FastDFS.MinIO等文件服务来实现存储,这种方案可能对于企业成本较小,但缺点也是很多,例如:1.增加技
-
GO语言实现文件上传的示例代码
目录 前言 文件上传 表单操作 服务端操作 流程实现 小结 前言 最近在写一个文件上传的功能,现在来进行整理总结一下go语言如何上传文件的,本文主要分享一下golang实现文件上传的流程和具体代码,供大家参考,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助. 文件上传 表单操作 要使表单能够上传文件,需要添加form的enctype属性enctype="multipart/form-data",upload.html代码如下: <html> <head> &