資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用jQuery Dropzone外掛上傳檔案？
在網站上上傳檔案可能是一項具有挑戰性的任務，尤其是在您必須處理不同型別的檔案（例如影像、影片和文件）時。幸運的是，jQuery Dropzone外掛只需幾行程式碼即可輕鬆處理檔案上傳。還有許多其他可用於上傳檔案的外掛，例如Fine-Uploader、JQuery File upload、Uploadify等。
在本文中，我們將學習如何使用jQuery Dropzone外掛上傳檔案。我們將逐步介紹使用jQuery Dropzone外掛在網站上上傳檔案的整個過程。
什麼是jQuery Dropzone外掛？
jQuery Dropzone外掛是一個功能強大且易於使用的外掛，允許使用者使用拖放功能將檔案上傳到伺服器。該外掛附帶許多自定義選項和功能，使在不同場景中輕鬆處理檔案上傳成為可能。jQuery Dropzone外掛的一些功能包括：
支援不同型別的檔案
能夠一次上傳多個檔案
自動檢測和驗證檔案大小
拖放檔案上傳
可自定義的上傳進度指示器
上傳前的影像預覽
現在我們知道了jQuery Dropzone外掛是什麼，讓我們繼續討論在我們的網站中使用它所需的步驟。
使用jQuery Dropzone外掛上傳檔案的步驟
步驟1：下載或使用CDN將jQuery Dropzone外掛包含到專案中
第一步是從各自的網站下載jQuery和Dropzone外掛的最新版本。或者我們也可以使用CDN連結將這些檔案包含到我們的專案中。以下是需要包含在HTML中的可用CDN連結。
使用的CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
步驟2：新增表單以使用Dropzone外掛
第二步是使用CDN連結包含jQuery和Dropzone外掛的最新版本。以下是用於新增具有“dropzone”類的表單元素的語法，上傳的檔案將在此處顯示。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="your-upload-file.php" class="dropzone"></form>
</div>
</div>
</div>
</body>
</html>
步驟3：配置外掛選項
下一步是配置Dropzone外掛的選項。我們可以透過建立一個新的Dropzone例項並將配置選項作為物件傳遞來實現。
<script>
$(function() {
var myFileUploadDropZone = new Dropzone(".dropzone", {
url: "your-upload-file",
maxFiles: 15,
maxFilesize: 5,
acceptedFiles: ".png, .jpg, .gif, .pdf, .doc",
addRemoveLinks: true,
dictDefaultMessage: "Drop your files here or click to upload",
dictFallbackMessage: "Your browser does not support drag & drop feature.",
dictInvalidFileType: "Your uploaded file type is not supported.",
dictFileTooBig: "File is too big ({{filesize}} MB). Max filesize: {{maxFilesize}} MB.",
dictResponseError: "Server responded with {{statusCode}} code.",
dictCancelUpload: "Cancel Upload",
dictRemoveFile: "Remove",
init: function() {
this.on("complete", function(file) {
this.removeFile(file);
});
}
});
});
</script>
在這個例子中，我們向Dropzone例項傳遞了以下選項：
url - 上傳檔案將傳送到的URL。
maxFiles - 可以上傳的檔案的最大數量。
maxFilesize - 每個檔案以兆位元組為單位的最大大小。
acceptedFiles - 可以上傳的檔案型別。
addRemoveLinks - 是否新增已上傳檔案的刪除連結。
dictDefaultMessage - 沒有上傳檔案時顯示的預設訊息。
dictFallbackMessage - 瀏覽器不支援拖放檔案上傳時顯示的訊息。
dictInvalidFileType - 使用者嘗試上傳不受支援的檔案時顯示的訊息。
dictFileTooBig - 使用者嘗試上傳檔案過大時顯示的訊息。
dictResponseError - 伺服器返回錯誤程式碼時顯示的訊息。
dictCancelUpload - 取消上傳按鈕的標籤。
dictRemoveFile - 刪除檔案按鈕的標籤。
我們還向“complete”事件添加了一個事件監聽器，該監聽器將在檔案成功上傳後將其從介面中刪除。
步驟4：建立一個PHP檔案來處理檔案上傳
我們的下一步是建立一個PHP檔案，該檔案將在伺服器端處理上傳的檔案。以下是處理檔案上傳的簡單PHP指令碼的語法：
<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
?>
現在是時候測試我們的程式碼了，我們已經配置了Dropzone外掛並建立了PHP檔案來處理檔案上傳，我們可以在我們的網站上測試檔案上傳功能。只需將檔案拖放到Dropzone區域或點選該區域瀏覽檔案即可。檔案上傳後，您應該會看到它們顯示在介面上，並可以選擇刪除它們。以下是在HTML中完整的執行示例。
示例
以下是一個完整的示例，用於演示如何使用Dropzone外掛上傳檔案。
<html>
<head>
<title>Example demonstrating how to upload files using jQuery Dropzone Plugin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css">
</head>
<body>
<h3>Example demonstrating how to upload files using jQuery Dropzone Plugin</h3>
<form action="your-upload-file.php" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script>
<script>
$(function() {
var myFileUploadDropZone = new Dropzone(".dropzone", {
url: "your-upload-file",
maxFiles: 15,
maxFilesize: 5,
acceptedFiles: ".png, .jpg, .gif, .pdf, .doc",
addRemoveLinks: true,
dictDefaultMessage: "Drop your files here or click to upload",
dictFallbackMessage: "Your browser does not support drag & drop feature.",
dictInvalidFileType: "Your uploaded file type is not supported.",
dictFileTooBig: "File is too big ({{filesize}} MB). Max filesize: {{maxFilesize}} MB.",
dictResponseError: "Server responded with {{statusCode}} code.",
dictCancelUpload: "Cancel Upload",
dictRemoveFile: "Remove",
init: function() {
this.on("complete", function(file) {
this.removeFile(file);
});
}
});
});
</script>
</body>
</html>
結論
jQuery Dropzone外掛是一個功能強大且易於使用的外掛，用於使用拖放功能將檔案上傳到伺服器。在本文中，我們討論了使用CDN在網站上使用jQuery Dropzone外掛上傳檔案所需的步驟。
4K+ 次瀏覽
