在输入右侧显示上传的文件数量答案

【问题标题】：Show the amount of files uploaded at the right of an input在输入右侧显示上传的文件数量
【发布时间】：2021-01-05 06:08:40
【问题描述】：

我正在创建一个带有 input=file 的表单，我的问题是当我向其中添加 CSS 时，更新的文件数量消失了，我知道这是因为我在 CSS 中放置了 display=none，但我需要它们出现，否则人们不会知道正确上传的文件，有没有办法做到这一点？如果可能的话，我更喜欢不使用 JS。谢谢

这是我的代码

HTML

  <div>
      <label for="file-upload" class="custom-file-upload mt-2"><i class="fas fa-cloud-upload-alt"></i> Upload[enter image description here][1]</label>
      <input id="file-upload" type="file" name="file" multiple="multiple" required>
  </div>

CSS

input[type="file"] {
display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 30px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

这是它的外观图像，我需要将上传文件的数量放在“按钮”的右侧或上传文件时的任何消息。

【问题讨论】：

标签： javascript php css

【解决方案1】：

正如你所说，这就是问题所在。只需删除这部分 CSS。如果这不是所需的解决方案，请解释我误解了什么，并请进一步说明您的问题。

input[type="file"] {
display: none;
}

如果您想进一步操作图片上传按钮 - 在这里您可以找到一些想法和演示。这里 How to hide default choose file button

请注意：由于这是一个没有 AJAX 的标准文件选择器 - 用户刚刚选择了 2 个文件，但这些文件尚未上传到服务器。这通常仅在用户单击提交时才会发生。（或者你用 AJAX 推送它们）然后文件被上传，然后它们才保存在服务器上，如果一切正常（文件大小、文件类型、网络连接......），你可以显示这些文件，然后它们已成功上传。使用 AJAX，您可以立即上传它们并在回调时更改文件输入的外观（或者插件会为您执行此操作），但这绝对是 JS。

【讨论】：

当我删除它时，现在出现原来的按钮，我不想要那个按钮，只有“2个文件选择部分”
您能否提供一张图片 - 上面没有。您是否考虑使用dropzonejs.com，它为您提供了大量的样式选项？
github.com/kartik-v/bootstrap-fileinput 是另一个非常不错的文件输入插件。
这是我擦除“显示：无；”时的外观图像firebasestorage.googleapis.com/v0/b/simpleqrpdf.appspot.com/o/… 我需要删除“Elegir Archivos”并且“2 Archivos”继续存在
我不确定我是否理解你。如果这是没有 AJAX 的 Bootstrap 的标准文件选择器 - 那么用户刚刚选择了 2 个文件 BUT 这些文件 未上传 到服务器。这通常会在用户单击 submit 时发生。然后文件被上传并只有它们被保存在服务器上，您可以显示文件已成功上传。使用 AJAX，您可以立即上传它们并在回调时更改文件输入的外观（或者插件会为您执行此操作），但这绝对是 JS。