如何在多文件上传器中启用提交按钮直到条件？

Posted

技术标签:

【中文标题】如何在多文件上传器中启用提交按钮直到条件？【英文标题】：How to enable submit button until condition in a multiple file uploader? 【发布时间】：2019-09-21 07:48:25 【问题描述】：

我正在做一个 WebApp，人们将在其中上传 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 的方法可能有用。

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

【问题讨论】：

【参考方案1】：

您可以从上传对象挂钩upload.cachedFileArray 以检查array 长度，以验证是否已选择2 个文件进行上传。这是通过由window event listeners fileUploadWithPreview:imageSelected 和fileUploadWithPreview:imageDelete 绑定的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>

【讨论】：

我更新了答案以更好地处理选择后删除文件的情况。 感谢您的回答！它可以按我的意愿工作，唯一需要更改的是包含以下部分，因为当我上传 3 个文件时，提交按钮仍然启用：else $('input:submit').attr('disabled',true); 是的，我更新了我的答案。请参阅更新的 sn-p。如果这符合您的要求，请标记为已接受的答案。谢谢！ 我已经在您编辑之前发表了评论。有了新的上传，它就完美了！上传超过 2 个文件然后删除其中一些文件的事实是我没有想到的错误，我已经看到这将是一个问题！！！感谢您关注@Woodrow！ 不客气！在我发布了原始的 sn-p 后，我意识到如果有人删除了文件可能会出现问题，所以我只是想确保我涵盖了基础。很高兴我能帮上忙！

以上是关于如何在多文件上传器中启用提交按钮直到条件？的主要内容，如果未能解决你的问题，请参考以下文章

如何禁用提交按钮，直到所有文本字段都已满并选择文件

在提交按钮 C# MVC 上获取上传的文件

如何启用/禁用提交按钮，仅在提供两个条件的情况下：检查输入单选和填充输入文本

Jquery Blueimp 文件上传回调

为啥在多部分上传到在 aws lambda 中运行的 express 过程中文件被损坏？

仅当单击提交按钮时，如何让 Dropzone.js 上传文件？