详细信息
一个 jQuery & 基于Bootstrap 4 的 dropzone 文件上传插件，允许您通过拖放选择要上传的文件。
更多功能：
-
适用于本机文件输入。
-
图像预览。
-
支持多个文件。
-
允许您限制文件类型。
-
自定义样式。
也可以看看：
-
高级拖放文件上传器 - jQuery 5x5jqpi.js
-
拖放文件上传器插件 - dropzone
-
用于 Bootstrap 的拖放文件上传插件 - dropzone
-
拖放多文件上传插件 - jQuery file-dropzone
-
jQuery 和 Vanilla JavaScript 中的 10 个最佳文件上传库
如何使用它：
1.在文档中加载必要的jQuery库和Bootstrap 4框架。
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
2. 加载 jQuery bs-dropzone.js 插件的文件。
<link rel="stylesheet" href="dist/css/bs-dropzone.min.css" />
<script src="dist/js/bs-dropzone.js"></script>
3.在目标文件输入上初始化插件并完成。
<input type="file" name="demo" id="demo" />
$(function(){
$('#demo').bs_dropzone();
});
4. 启用文件预览。
$(function(){
$('#demo').bs_dropzone();
});
5. 文件上传限制文件类型。
$('#demo').bs_dropzone({
allowed: ['jpg', 'jpeg', 'png', 'bmp', 'webp', 'jfif', 'svg', 'ico', 'gif'],
accepted: ['jpg', 'jpeg', 'png'],
});
6. 覆盖默认的 CSS 类。
$('#demo').bs_dropzone({
boxClass: 'alert text-center',
imageClass: 'img-fluid',
noneColorClass: 'alert-info',
dragColorClass: 'alert-warning',
doneColorClass: 'alert-success',
failColorClass: 'alert-danger',
});
7. 覆盖默认模板。
$('#demo').bs_dropzone({
dropzoneTemplate: '<div class="bs-dropzone"><div class="bs-dropzone-area"></div><div class="bs-dropzone-message"></div><div class="bs-dropzone-preview"></div></div>',
parentTemplate: '<div class="row"></div>',
childTemplate: '<div class="col"></div>',
});
8. 将 dropzone 翻译成您的语言。
$('#demo').bs_dropzone({
language: {
emptyText: '[Drop File Here or Click To Upload]',
dragText: '[Drop File Here]',
dropText: '[_t_ File(s)]'
},
});
9. 当文件输入改变时执行一个函数。
$('#demo').bs_dropzone({
change: function (element, files) {
alert(files.length + ' File(s)');
}
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。