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

Posted 2023-05-08

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

【英文标题】：Multiple file upload issue in input file

【发布时间】：2020-12-14 21:33:59

【问题描述】：

在我的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 = [];
            );
        );

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

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

【参考方案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>

【讨论】：

非常感谢@AlwaysHelping 的解决方案。

@GayanS.Muthukumarana 欢迎您。很高兴我能帮助你。快乐编码