dropzone:未选择文件时提交按钮不起作用
dropzone是一个开源的JavaScript库，用于实现文件拖拽上传功能。它提供了一个用户友好的界面，允许用户将文件拖拽到指定区域进行上传操作。
当用户未选择文件时，提交按钮不起作用是dropzone的默认行为。这是为了避免用户在没有选择文件的情况下误操作提交表单。如果需要在未选择文件时禁用提交按钮，可以通过自定义代码实现。
以下是一个示例代码，演示了如何使用dropzone库，并在未选择文件时禁用提交按钮：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css">
</head>
<body>
<form action="/upload" class="dropzone" id="myDropzone"></form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script>
// 初始化dropzone
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
// 配置选项
});
// 监听文件添加事件
myDropzone.on("addedfile", function(file) {
// 当有文件添加时，启用提交按钮
document.getElementById("submitBtn").disabled = false;
});
// 监听文件移除事件
myDropzone.on("removedfile", function(file) {
// 当文件被移除时，检查是否还有其他文件，如果没有则禁用提交按钮
if (myDropzone.files.length === 0) {
document.getElementById("submitBtn").disabled = true;
}
});
</script>
</body>
</html>在上述代码中，我们首先引入了dropzone的CSS和JavaScript文件。然后，在一个表单中创建了一个具有dropzone类的元素，用于显示文件拖拽区域。通过JavaScript代码，我们初始化了dropzone，并监听了文件添加和移除事件。当有文件添加时，我们启用了提交按钮；当文件被移除时，我们检查是否还有其他文件，如果没有则禁用提交按钮。
这样，当用户未选择文件时，提交按钮将处于禁用状态，直到用户选择了文件才能启用提交按钮。
腾讯云相关产品中，可以使用对象存储（COS）来存储上传的文件。对象存储是一种高可靠、低成本、可扩展的云存储服务，适用于存储和处理大规模非结构化数据。您可以通过腾讯云对象存储（COS）服务来存储和管理上传的文件。具体的产品介绍和使用方法，请参考腾讯云对象存储（COS）的官方文档：腾讯云对象存储（COS）。
相关·内容
我有一个上传文件的dropzone表单，包含在一个带有两个输入文本的标准表单中，提交按钮(id= submit - all )的行为由以下javascript部分控制(为了在点击按钮后上传所有文件)：Dropzone.options.myDropzone = { autoProcessQueueclos
浏览 4提问于2016-08-10得票数 4
回答已采纳
我正在使用Dropzone，并尝试将其与normal form相结合，所以我阅读了本教程，是的，我可以成功地做到这一点。然而，我希望其他输入文本域和提交按钮是在表单标签之外(在dropzone之外)，所以我使用css position:absolute文本输入到表单上方和表单下面的提交按钮
<form id="my-awesome-dro
浏览 11提问于2016-12-28得票数 2
回答已采纳
1回答
你好，我正在寻找一种方式上传文件到文件夹。我想添加第三个按钮(选择选项)到哪个文件夹上传它。知道怎么只为一个文件这么做吗？示例：styles.css开始取消文件夹( css
浏览 1提问于2014-05-26得票数 0
1回答
我使用的是DropZone JS，它在前端工作得很好。 <input type="file" name="file">&l
浏览 12提问于2017-03-05得票数 0
我试图设置一个简单的HTML拖放表单，用户可以通过DropzoneJS一次性上传多个文件。<form action='<?>' method="post" enctype="multipart/form-data" class="dropzone" id="basic_menu_dropzone"></form>
jQuery(document).
浏览 3提问于2016-03-09得票数 4
回答已采纳
我使用dropzone和active storage直接上传文件，从客户端上传文件到s3服务器。目前，我正在使用dropzone的addedfile事件从dropzone获取文件，并通过new ActiveStorage.DirectUpload(file, url);上传它。现在，根据文档，他们提供了一些事件侦听器，我可以使用它们来向用户显示上传的进度，但只有当我使用普通表单和提交按钮时，它们才能工作。如果我通过Javascript
浏览 16提问于2019-02-13得票数 1
1回答
如何使dropzone.js与按钮点击，而不是自动上传，但当我点击按钮提交，然后文件被上传，这是我的代码 url: SITE_URL +$('#submit').click(function(){ });
显示Undefined index: file时出错当不使用提交或
浏览 8提问于2016-07-29得票数 0
我正在使用上传文件。现在，我想检查一个文件是否已填写，如果它不是，然后取消上传。="Type the title of the album">我的jQuery代码：
Dropzo
浏览 4提问于2014-05-23得票数 12
回答已采纳
我有两个表单，其中我上传了两个不同的文件。我使用一个提交按钮来处理这两个文件。在这里，我想在没有上传文件或只上传了一个文件时禁用提交按钮 <html> Dropzone.options.myDropzone ={
Dropzone.autoDiscover = false
浏览 13提问于2018-08-21得票数 0
回答已采纳
嗨，我有一个使用dropzone.js的表单，如下所示， <form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
<input type=&q
浏览 11提问于2020-04-29得票数 0
1回答
我已经使用dropzonejs将文件上传到s3存储桶。 Dropzone.autoDiscover = false; url: '
浏览 0提问于2017-10-28得票数 1
我正在尝试实现拖放文件上传到网页的功能。我在dropzone.js文件中有这个javascript函数： this.filesProcessing.pushDropzone具有这样的功能，可以在文件被拖到页面上时立即开始上传，或者等到用户调用上面提到的函数时再上传。
当我点击“提交”按钮时，如何调
浏览 0提问于2013-04-22得票数 1
1回答
我希望我的上传按钮提交表单，如果用户没有选择任何文件，那么我将打开文件选择对话框。)}import React from 'react';import Dropzonefrom 'react-dropzone';
class Form extends React.Componen
浏览 2提问于2020-04-21得票数 1
回答已采纳
1回答
当我点击表单的提交按钮时，这就是我用来上传我的文件的代码。 jQuery(document).ready(function() {
var myDropzone = new Dropzone(
浏览 1提问于2016-03-10得票数 0
回答已采纳
3回答
();加载页面时，我得到以下错误：
未明错误:未提供URL。早些时候，我修改了dropzone.js文件以设置Dropzone选项，但我重置了dropzone.js库文件，并决定在文件中设置这些选项。当在myDropzone.js，dropzone.js文件中设置选项时，我没有出错，但在重置这些选项并将它们安装在dropzone.js文件中之后，我就有
浏览 3提问于2016-08-27得票数 2
大家好，我正在用dropzone.js上传图片到服务器上，但是我有点问题。我想知道是否有任何方法可以在拖放图像或单击并选择图像并使用可单击的提交按钮手动将图像提交到服务器时禁用dropzone.js自动上传到服务器
请任何建议或帮助，也许一个简单的代码将不胜感激。认真地说，我觉得这个东西做的不对，因为这个东西在某些方面是没用的，他们是不是想告诉我，当一个用户上传了它的头像，dropzone就会卡在那里看着他们，他们看着它却没有提交<e
浏览 56提问于2015-10-10得票数 4
我正在使用react-dropzone库从浏览器中拖动或选择文件。
我有下面的组件让用户选择多个文件。除了如果用户选择更多的文件，比如2个或更多大小为1 MB的文件，文档的选择会花费时间之外，一切都是正常的。如果文件数量较多，则选择用户选择的文件所需的时间越长。根据我对react-dropzone文档的理解，它会在上传文件后立即
浏览 12提问于2021-02-05得票数 1
我在组合"normal“表单和dropzone时遇到了问题。我有一个带有文本输入、文件输入和dropzone部分的表单。我要把所有的东西都立刻发出去。所以我手动创建了dropzone字段，禁用了dropzone的autoProcessQueue功能，并绑定到提交按钮的onClick。<input type="submit" value="Create" class="btn btn-de
浏览 1提问于2015-01-17得票数 3
使用进行拖放文件上传，我想动态附加一个文件上传按钮。
该页面有一个订单列表。当您选择一个订单时，它将通过Ajax调用加载并显示出来。我在页面加载时在document.body上实例化了Dropzone，以便在选择订单之前拒绝上传，并显示友好的错误消息。当订单被加载时，一个upload按钮与订单一起呈现，我想将Dropzone点击处理程序附加到这个动态创建的按钮上。每次选择<
浏览 0提问于2014-11-08得票数 3
回答已采纳
我想限制Dropzone在你点击指定的dropzone区域时只选择一个文件，但我找不到任何参数来做到这一点。现在，当我选择一个文件并点击Open时，Dropzone立即再次弹出打开文件对话框，而不是点击，这是我不想要的。
有没有人碰到这个？我尝试设置MaxFiles=1，但它不起作用。
浏览 1提问于2013-10-25得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
