javascript - 如何在多文件 uploader 中启用提交按钮直到条件？-6ren

javascript - 如何在多文件 uploader 中启用提交按钮直到条件？

转载作者：行者123 更新时间：2023-11-30 19:35:49

27

4

我正在做一个 Web 应用程序，人们会上传 2 张图像，我需要通过 python 代码传递这些图像。因此，我只想让他们在上传 2 张图片时发送。

我一直在阅读其他帖子，例如:

How to disable submit button until file is selected

Enable submit button after uploading more than 1 file

但我无法将其推断到我的情况:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.css">
</head>


<body>
  <!-- Uploader -->
<div class="custom-file-container" data-upload-id="myImage">
    <label>Upload your images <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>

    <label class="custom-file-container__custom-file" >
      <form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
      <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="image/*" aria-label="Choose File" multiple>
      <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
      <span class="custom-file-container__custom-file__custom-file-control"></span>
    </label>
    <div class="custom-file-container__image-preview"></div>
</div>
<input type="submit" name="send" disabled/>
</div>


<script src="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.js"></script>

<script>
      var upload = new FileUploadWithPreview('myImage', {showDeleteButtonOnImages: true, text: {chooseFile: 'Nom del fitxer', browse: 'Examina'}})
</script>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);; 
                } 
            }
            );
    });

</script>

</body>
</html>

最后添加的脚本是第一个链接给出的解决方案，可以正常运行，但不是我想要的。

文件上传代码来自https://github.com/promosis/file-upload-with-preview ，在那里我看到有一个名为 selectedFilesCount 的方法可能很有用。

感谢您抽出宝贵时间，如果您在我的代码中看到一些废话，我深表歉意，但我是这些语言的新手...

最佳答案

您可以挂接到上传对象的 upload.cachedFileArray 以检查 array 长度，以验证是否已选择 2 个文件进行上传。这是通过 window 事件监听器 fileUploadWithPreview:imageSelected 和 fileUploadWithPreview:imageDelete 绑定(bind)的 toggle() 函数进行检查的，因此如果图像被选中后被移除，你仍然可以执行 2 的规则:

$(document).ready(function() {

});

var toggle = function() {
  //console.log(upload.cachedFileArray.length);
  if (upload.cachedFileArray.length == 2) {
    $('input:submit').attr('disabled', false);
  } else {
    $('input:submit').attr('disabled', true);
  }
};

window.addEventListener('fileUploadWithPreview:imageSelected', function(e) {
  // optionally you could pass the length into the toggle function as a param
  // console.log(e.detail.cachedFileArray.length);
  toggle();
});

window.addEventListener('fileUploadWithPreview:imageDeleted', function(e) {
  // optionally you could pass the length into the toggle function as a param
  // console.log(e.detail.cachedFileArray.length);
  toggle();
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.css">
</head>

<body>
  <!-- Uploader -->
  <div class="custom-file-container" data-upload-id="myImage">
    <label>Upload your images <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>

    <label class="custom-file-container__custom-file">
      <form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
      <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="image/*" aria-label="Choose File" multiple>
      <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
      <span class="custom-file-container__custom-file__custom-file-control"></span>
    </label>
    <div class="custom-file-container__image-preview"></div>
  </div>
  <input type="submit" name="send" disabled/>
  </div>
  <script src="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.js"></script>
  <script>
    var upload = new FileUploadWithPreview('myImage', {
      showDeleteButtonOnImages: true,
      text: {
        chooseFile: 'Nom del fitxer',
        browse: 'Examina'
      }
    });
  </script>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>

</html>

关于javascript - 如何在多文件 uploader 中启用提交按钮直到条件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55958372/

27

4

0

文章推荐： javascript - 如何将 args 用作 json 字段

文章推荐： javascript - 我如何获得 myCountry 的值(value)？

c# - 如何检测不同的用户设置？启用 Javascript，启用 Cookie
我想知道如何首先检测 Javascript 是否启用/禁用。在此站点上禁用 javascript 表明 stackoverflow 使用了称为标签的东西。这是标准的做法吗？它适用于所有浏览器吗？它不
PHP 启用
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How to enable PHP short tags ? Enable short open tags
c# - 启用 SourceLink
在 VSTS (Azure DevOps) 上拥有私有(private)存储库我尝试通过将以下内容添加到 .csproj 文件来启用 SourceLink:https://github.com/dot
wxPython 框架禁用/启用？
我创建了一个 wx.Frame(我们称之为 mainFrame)。该框架上包含一个按钮，当单击该按钮时，会创建一个新框架(我们称之为 childFrame)。我想知道如何在创建 childFrame
WPF 启用/禁用控件
当我禁用 WPF 中的控件时，比如说一个菜单项 MenuItem aMenuItem = ... aMenuItem.IsEnabled = false; MenuItem 中的文本仍然处于事件状态，
Nginx 启用 gzip
我想在我的 nginx 服务器上启用 gzip 压缩。 nginx.conf 文件在这里: http { # Enable Gzip server { location ~* \.(?
Heroku - 启用/禁用每周备份
我正在使用免费的 heroku 附加 PG 备份并遵循这些 instructions .我找到了安装应用程序的命令:heroku addons:add pgbackups:auto-week。但是我想
javascript - 启用/禁用输入元素的脚本？
我想知道脚本是否可以使用某种切换按钮启用/禁用页面上的所有输入元素。我用谷歌搜索了它，但除了这个之外没有发现任何有用的东西: http://www.codetoad.com/javascript/e
jQuery:启用/禁用日期选择器
在我的 php 文件中，我想使用 jQuery Datepicker。当我的文件加载时，我创建了禁用的日期选择器。然后，当我的 php 文件(它是一个表单)中的一个特殊字段被填充时，我想启用日期选
c# - 启用/禁用按钮
我有一个按钮，如下所示: RadButton lnkAdd = new RadButton(); lnkAdd.ID = "BtnAdd"; lnkAdd.CommandName = RadGrid.
c# - 启用/禁用任务管理器
public static void ToggleTaskManager(string keyValue) { RegistryKey objRegistryK
azure - 启用/禁用事件订阅
我正在 Azure 中使用事件网格订阅，该订阅在创建 Blob 时触发。然而，我们有很多文件进入这个 blob，比如说 1000 多个。如果我发现任何文件有任何错误，我想做的是禁用事件订阅。最佳答
javascript - 启用/禁用内容上的按钮可编辑键盘
我的网站上有几个使用 HTML5 contentEditable 属性的 div。目标是让用户能够开始编写日记条目，并将保存按钮从禁用更改为启用。这是我目前拥有的 HTML: Write
javascript - 启用/禁用范围输入
我有一个范围输入，其定义如下: @Html.LabelFor(m => Model.Quality, Resources.CompressionQuality) 和一个下拉菜单: @Html.Lab
javascript - 启用/禁用按钮的下拉菜单
我正在尝试创建一个启用/禁用按钮的下拉菜单，并且我正在关注此 example 但它已经有 4 年历史了，而且该功能似乎无法在我的 xhtml 页面上运行。任何帮助都将被适当最佳答案这是一个现场演
azure - 启用/禁用事件订阅
我正在 Azure 中使用事件网格订阅，该订阅在创建 Blob 时触发。然而，我们有很多文件进入这个 blob，比如说 1000 多个。如果我发现任何文件有任何错误，我想做的是禁用事件订阅。最佳答
.net - 启用/禁用代理应用程序不适用于IE
我在这里遇到一个非常奇怪的情况:我编写了一个应用程序，除其他外，将连接的代理从打开切换到关闭，反之亦然。通过更改注册表中的值来完成此操作: public void SetUpProxy(string
kubernetes - 启用 ExpandPersistentVolumes
我需要调整一堆 PVC 的大小。似乎最简单的方法是通过ExpandPersistentVolumes 功能。但是我无法获得配置合作。 ExpandPersistentVolumes feature g
ios - 启用/禁用时从TextColor之类的按钮更改BorderColor
如果我的TextField为空，则应禁用该按钮，并且该按钮的textColor和borderColor应该为灰色。但是，启用按钮后，颜色应为蓝色。更改textColor很容易: button.Set
java - 启用/禁用另一个类的表单按钮
您好，我的问题是:我无法从另一个类启用表单的按钮。我的表单类是 public class FileSending { //Function for enabling the button

首页

博学

6Ren·AI

商城

javascript - 如何在多文件 uploader 中启用提交按钮直到条件？