溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了使用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" >點我上傳</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" >點我上傳</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" 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"> <h3 class="lead">Configuration Demo</h3> <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" 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; //開始先刪除單個文件的布局 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" ></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() {
this.on("addedfile", function(file) {
$(".start").click (function() {
this.enqueueFile(file);
})
});
}
});
</script>
</body>
</html>
demo文件
如果是flask框架可進行測試點擊此處下載，如果是php或者其他就看看不必下載
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
