输入文件中的多个文件上传问题

Question

在我的Laravel 项目中，我通过<input type="file"> 使用多个文件上传。

在我看来：

<input type="file" id="upload_requiremnt_files" name="upload_requiremnt_files[]" multiple>
<div id="upload_prev"></div>

上传标签上方是一个表单，我从用户那里获得了更多数据。我使用AJAX 提交表单。通过AJAX 函数，我将所有数据传递给控制器​​。

JQuery函数：

        var newFileList = [];
        $(document).ready(function(readyEvent) {
            $('#upload_requiremnt_files').on('change', function(changeEvent) {
                $("#upload_prev").html('');

                var filename = this.value;
                var lastIndex = filename.lastIndexOf("\\");
                if (lastIndex >= 0) {
                    filename = filename.substring(lastIndex + 1);
                }
                var files = changeEvent.target.files;
                for (var i = 0; i < files.length; i++) {
                    $("#upload_prev").append('<span>' + '<div class="filenameupload" id="'+i+'">' + files[i].name + '<p class="close" ><i class="fa fa-window-close" aria-hidden="true"></i></p></div>' + '</span>');
                }
            });

            $(document).on('click', '.close', function(closeEvent) {
                console.log(closeEvent);
                var id = $(this).parent().attr("id");
                //alert(id);
                console.log(id);
                $(this).parents('span').remove();
                var fileInput = $('#upload_requiremnt_files')[0];

                newFileList = $('#upload_requiremnt_files')[0].files;
                newFileList = Array.prototype.slice.call(newFileList);

                newFileList.splice(id,1);

                fileInput.files = [];
            });
        });

一旦我选择了多个文件，这些文件就会被列出来。如果我单击特定文件的删除图标，它将被删除。在我点击提交后，即使我从那些上传的文件中删除了一些文件，所有文件都将被发送到控制器。但我只需要传递那些选定的文件。

对于这个问题，我也在 * 中经历了几个解决方案。但是找不到更好的解决方案。有人可以支持我吗？将不胜感激。

Answer 1

您需要使用change 函数将所有文件initially 存储在一个数组中，然后将删除图标HTML 数据存储在另一个数组中以匹配我们当前在主filesToUpload 数组中的fileName 和id .

如果文件名与我们当前在filesToUpload 中的fileName 匹配，我们只需从主数组以及removeFile 数组中拼接该项目。

到append关闭文件icon和文件data，我们可以检查removeFile数组的长度，然后使用.join()函数追加数据。

我还添加了一个实时计数器。从filesToUpload 数组中删除文件后检查剩余的文件数量。

此外，如果您单击Upload 按钮，您将看到需要将controller 发送给processing 的文件作为formData。

现场演示：（我在每一行都添加了 cmets 供您参考）

$(document).ready(function(readyEvent) {

  var filesToUpload = []; //store files
  var removeFile = []; //remove remove files
  var fileCounter = 0; //count files

  //upload file
  $('#upload_requiremnt_files').on('change', function() {

    $("#upload_prev").html('');

    fileCounter = this.files.length; //count files
    
    //Store all files to our main array
    var files = this.files;
    for (var i = 0; i < files.length; i++) {
      filesToUpload.push(files[i]);
    }
    
    //Push file to remove file to that we can match to remove file
    for (var i = 0, f; f = files[i]; i++) {
      removeFile.push('<div class="filenameupload" id="' + i + '"  fileName="' + f.name + '" >' + f.name + '<p class="close" ><i class="fa fa-window-close" aria-hidden="true"></i></p></div>');
    }

    //Append Remove file icon to each file
    if (removeFile.length) {
      $("#upload_prev").html(removeFile.join(""));
    }

    //Show counter
    $('#upload_count').show().text('Total Files To Upload = ' + fileCounter)

  });

  //Remove files 
  $(document).on('click', '.close', function() {

    var i = $(this).parent().attr("id"); //get index
    var fileName = $(this).parent().attr("fileName"); //get fileName

    //Loop through all the file and remove Files
    for (i = 0; i < filesToUpload.length; ++i) {
      if (filesToUpload[i].name == fileName) {
        //Remove the one element at the index where we get a match
        filesToUpload.splice(i, 1);
        removeFile.splice(i, 1);
      }
    }

    //Remove file from DOM
    $(this).parent().remove();

    //Decrease counter
    fileCounter--

    //Update counter
    if (fileCounter > 0) {
      $('#upload_count').text('Total Files To Upload = ' + fileCounter)
    } else {
      $('#upload_count').hide()
    }
  })

  //Demo Upload button
  $(document).on('click', '#upload_file', function() {
    if (filesToUpload.length) {
      alert(filesToUpload.length + ' files will be sent to controller')
    } else {
      alert('Nothing to upload')
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="file" id="upload_requiremnt_files" name="upload_requiremnt_files[]" multiple>
<div id="upload_count"></div>
<div id="upload_prev"></div>
<br>
<button id="upload_file">Upload</button>