在多个文件上载时删除文件时显示剩余文件数

Question

我写了以下fiddle to选择多个文件

但在此程序中，一旦我使用X图标删除文件，它就不会显示当前剩余的文件数

图片1

删除文件视图后，如下所示

图片2

这是程序上面的整个代码片段

HTML

<input type="file" id="uploadFile" name="FileUpload"  multiple="multiple"/>
<div id="upload_prev"></div>

脚本

$(document).on('click','.close',function(){
    $(this).parents('span').remove();

})

$('#uploadFile').on('change', function() {

    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadFile')[0].files;
    for (var i = 0; i < files.length; i++) {
     $("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
    }    
});

CSS

.filenameupload {
    width:98%;  
}

#upload_prev {
    border:thin solid #000;
    width: 65%;
    padding:0.5em 1em 1.5em 1em;
}

#upload_prev span {
    display: flex;
    padding: 0 5px;
    font-size:12px;
}

如何修改此程序以显示使用关闭图标

删除文件时剩余的文件数量

Answer 1

您无法修改代码中的文件输入文本。您可以设置的唯一值是空字符串

$('#uploadFile').val("");

我建议您创建一个div / span来显示所选文件的数量。删除文件时可以减少此计数

将值设为空fiddle

修改 如果隐藏文件输入，则无法从计算机中选择文件。您可以将不透明度设置为0。

#uploadFile {
  opacity: 0;
}

喜欢this

在这种情况下，您需要使用另一个元素来选择文件输入。请检查此fiddle

Answer 2

您在图片中突出显示的文字，即“所选的2个文件”，仅在您点击“选择文件”按钮（或“浏览...”按钮等等）时显示文件计数，具体取决于您正在使用哪个浏览器）并选择多个文件。当您单击相同的按钮并选择单个文件时，它不会说“选择1个文件”，而是简单地显示文件的名称。此外，它会在每次点击新按钮后重置。例如，如果单击按钮并选择“fileA.txt”，它将显示“fileA.txt”。如果再次单击并同时选择“fileB.txt”和“fileC.txt”，它将显示“2个文件已选中”，即使它现在将显示3个文件。

要实际提供所选文件总数的计数，您需要自己计算并提供自己的计数。我通过以下代码在下面的代码中展示了这一点：

• 创建一个跟踪文件总数的变量
• 在您的其他HTML
之前添加额外的A
• 创建一个名为B的新函数，将文件计数插入<div id="file_count"></div>
• 一开始就致电showFileCount
• 将计数增加“更改”处理程序中最近选择的文件数，然后调用div
• 在“点击”处理程序中将计数减1，然后调用showFileCount

showFileCount

showFileCount

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) {
    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' abc</div>' + '<p class="close" >X</p></span>');
  }
  fileCount += files.length;
  showFileCount();
});