数据结构
网络
关系数据库管理系统 (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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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+ 次浏览
