即使在使用属性 multiple = false 不起作用后也禁用多个文件选择

Posted 2023-03-22

【中文标题】即使在使用属性 multiple = false 不起作用后也禁用多个文件选择

【英文标题】：disable multiple files selection even after using property multiple = false is not working即使在使用属性 multiple = false 不起作用后也禁用多个文件选择

【发布时间】：2022-01-20 17:37:57

【问题描述】：

请看一下这个codesandbox example。

如果您在Line #186 上看到Advanced 上传者，则multiple 属性设置为false：

 <div className="card">
    <h5>Advanced</h5>
    <FileUpload
     multiple=false
     name="demo[]"
     url="https://primefaces.org/primereact/showcase/upload.php"
     onUpload=onUpload
     accept="image/*"
     maxFileSize=1000000
     emptyTemplate=
     <p className="p-m-0">Drag and drop files to here to upload.</p>
              
     />

所以这不允许我按"SHIFT + Down Arrow Key" 来选择多个文件。但是，如果我使用Choose 按钮选择一个文件并单击Open，它会显示在列表中。如果我再次单击Choose 按钮并选择另一个文件并单击Open，则会显示该文件。因此，多个文件仍然一次上传一个。如何解决这个问题？

我想知道在第一个文件出现在列表中之后是否触发了任何事件，以便我可以禁用选择按钮？

附：我不确定如何将代码框转换为 sn-p 代码以进行反应，因此在上面分享了代码框示例的链接。

【参考方案1】：

好吧，将多选设置为 false 是为了防止用户选择多个文件，但是您不能阻止他们再次单击该按钮，除非您在文件成功上传后禁用该按钮。 我建议您将变量设置为 flag = 0，一旦您从用户那里捕获成功上传，请设置 flag = 1 并设置 if 条件，如果 flag = 1 然后禁用按钮单击。

如果这对您有很好的解决方案，我会检查代码并稍后调整我的答案并为您编写代码。

【讨论】：

是的，如果你能把你的想法放在代码中，那就太好了。谢谢！ you cannot prevent them from clicking the button again unless you disable the button once the file is uploaded successfully实际上，这是在他们点击上传按钮之前发生的。所以我认为我们希望在用户选择完第一个文件后立即禁用“选择”按钮。

当他们从列表中删除图片时，您还需要将按钮设置为可点击:)

我现在在移动端，在页面最后制作Java脚本函数并按选择按钮所在的类选择元素，按f12找到类名并在末尾添加.onclick

我需要先在这里定义一个className ` ` 还是onUpload 处理程序可以充当您所说的.onClick？

这是我更新的代码框，我试图在其中禁用选择按钮。但是，它也禁用了我不想要的上传和取消按钮。似乎我正在寻找的东西没有解决方案。 codesandbox.io/s/epic-chandrasekhar-qz9tg?file=/src/demo/…