使用Dropzone.js上傳的示例代碼
更新時(shí)間：2017年10月10日 09:26:08 作者：年輕時(shí)代
本篇文章主要介紹了使用Dropzone.js上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了使用Dropzone.js上傳的示例代碼，分享給大家，具體如下：
說(shuō)明：后臺(tái)用的python的flask框架，后臺(tái)對(duì)你理解這篇文章沒(méi)什么影響，你可以使用php
form作為上傳區(qū)
引入Dropzone.js和dropzone.css然后使用表單form定義一個(gè)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作為上傳區(qū)
div作為上傳區(qū)也很簡(jiǎn)單
<!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;">點(diǎn)我上傳</div>
<script type="text/javascript">
//下面兩行是js和jquery的方式實(shí)現(xiàn)綁定div的例子，你選擇一種即可
//var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
$("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
</script>
</body>
</html>
效果
form作為上傳區(qū)配置
配置也分為兩種，如果使用的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">
//兩種配置方式，第一種，表單上傳時(shí)的配置方式，可以打開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作為上傳區(qū)配置
<!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;">點(diǎn)我上傳</div>
<script type="text/javascript">
//第二種配置，這種使用的是div做上傳區(qū)域時(shí)使用的配置
Dropzone.autoDiscover = false;//不知道該行有什么用，歡迎高手下方評(píng)論解答
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024
});
</script>
</body>
</html>
說(shuō)明：關(guān)于其他的配置請(qǐng)看最后的鏈接
主題
第一種
<!DOCTYPE html>
<html>
<head>
<meta charset=="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" rel="external nofollow" >
<!-- Optional theme -->
<link rel="stylesheet" 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">
<!-- 控制總體的三個(gè)按鈕 -->
<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">
<!-- 總體的進(jìn)度 -->
<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：使用后代表該標(biāo)簽是存放縮略圖的標(biāo)簽【這里必須是一個(gè) <img /> 元素 ，并且alt 和 src 屬性將被 Dropzone改變】
data-dz-name：存放文件名
data-dz-errormessage：存放錯(cuò)誤信息
data-dz-size：存放文件大小
data-dz-remove ：刪除隊(duì)列中的文件，或者取消正在從隊(duì)列上傳到服務(wù)器的文件
data-dz-uploadprogress：上傳進(jìn)度【( 當(dāng)這里有一個(gè) uploadprogress事件時(shí)， 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;
//開始先刪除單個(gè)文件的布局
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // 指定拖拽區(qū)為body
url: "{{ url_for('upload_file') }}", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // 當(dāng)隊(duì)列有文件，是否立刻自動(dòng)上傳到服務(wù)器
previewsContainer: "#previews", // 指定存放文件隊(duì)列區(qū)
clickable: ".fileinput-button" // 點(diǎn)擊某個(gè)按鈕或區(qū)域后出現(xiàn)選擇電腦中本地圖片，默認(rèn)是previewsContainer指定的區(qū)域
});
myDropzone.on("addedfile", function(file) {
// 讓模版中的單個(gè)文件可以點(diǎn)擊上傳
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// 顯示所有文件整體上傳進(jìn)度1-100
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// 顯示整體的上傳的進(jìn)度條，說(shuō)明：原來(lái)是0，所以上面的style.width = progress + "%"即使是100%也看不到
document.querySelector("#total-progress").style.opacity = "1";
// 失效上傳按鈕
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// 當(dāng)沒(méi)有文件上傳時(shí)，隱藏進(jìn)度條
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));與上面一樣，可查看源碼對(duì)比
};
//取消所有
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
</script>
</body>
</html>
第二種效果與默認(rèn)的一樣
<!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;//解決兩次實(shí)例Dropzone錯(cuò)誤，可在控制臺(tái)看到該錯(cuò)誤
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
previewTemplate: $('#preview-template').html(),//如果去掉該選項(xiàng)就會(huì)使用默認(rèn)的
autoQueue: true,
init: function() {
this.on("addedfile", function(file) {
$(".start").click (function() {
this.enqueueFile(file);
})
});
}
});
</script>
</body>
</html>
demo文件
如果是flask框架可進(jìn)行測(cè)試點(diǎn)擊此處下載，如果是php或者其他就看看不必下載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法,涉及javascript操作元素運(yùn)動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
使用Microsoft Ajax Minifier減小JavaScript文件大小的方法
大家用來(lái)減小JavaScript文件下載大小的常見的方式有2種： 壓縮（compression）和縮?。╩inification）。2010-04-04
這篇文章主要介紹了ES6箭頭函數(shù)和擴(kuò)展,結(jié)合實(shí)例形式分析了ES6箭頭函數(shù)和擴(kuò)展基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點(diǎn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以根據(jù)需求合理使用2023-06-06
js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序webview中監(jiān)聽返回按鈕實(shí)現(xiàn)步驟
在微信小程序中webview返回鍵是一個(gè)非常實(shí)用的功能,它允許用戶在嵌入的網(wǎng)頁(yè)中返回到上一個(gè)頁(yè)面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實(shí)現(xiàn)步驟,需要的朋友可以參考下2024-08-08
200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序的200行代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
ant-design-pro?的EditableProTable表格驗(yàn)證調(diào)用的實(shí)現(xiàn)代碼
這篇文章主要介紹了ant-design-pro?的EditableProTable表格驗(yàn)證調(diào)用,這里的需求是點(diǎn)擊外部的保存要對(duì)整個(gè)表單進(jìn)行驗(yàn)證，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06
Javascript基礎(chǔ)知識(shí)盲點(diǎn)總結(jié)之函數(shù)
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。這篇文章主要介紹了Javascript基礎(chǔ)知識(shí)盲點(diǎn)總結(jié)之函數(shù)的相關(guān)資料2016-05-05
JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02