使⽤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="exte
rnal 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" >点我上传</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
AwesomeDropzone = {
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" >点我上传</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="netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" >
<!-- Optional theme -->
<link rel="stylesheet" href="netdna.bootstrapcdn/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;
}
js实现轮播图最简代码#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></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" 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" 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;
//开始先删除单个⽂件的布局
veChild(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指定的区域
});
<("addedfile", function(file) {
// 让模版中的单个⽂件可以点击上传
file.previewElement.querySelector(".start").onclick = function() { queueFile(file); };
});
// 显⽰所有⽂件整体上传进度1-100
<("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
<("sending", function(file) {
// 显⽰整体的上传的进度条，说明：原来是0，所以上⾯的style.width = progress + "%"即使是100%也看不到
document.querySelector("#total-progress").style.opacity = "1";
// 失效上传按钮
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// 当没有⽂件上传时，隐藏进度条
<("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// 上传所有
document.querySelector("#actions .start").onclick = function() {
//FilesWithStatus(Dropzone.ADDED))；与上⾯⼀样，可查看源码对⽐
};
//取消所有
document.querySelector("#actions .cancel").onclick = function() {
};
</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="e
xternal 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" ></div>
<div id="aaa"></div>
<div id="preview-template" >
<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() {
<("addedfile", function(file) {
$(".start").click (function() {
})
});
}
});
</script>
</body>
</html>
demo⽂件
如果是flask框架可进⾏测试，如果是php或者其他就看看不必下载
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论