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

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

您需要initially使用函数将所有文件存储在一个数组中change，然后将删除图标 HTML 数据存储在另一个数组中，以匹配fileName我们当前在主filesToUpload数组中的 和 id。如果文件名与fileName我们当前的匹配filesToUpload，我们只需从主数组和removeFile数组中拼接该项目即可。要append关闭文件icon和文件，data我们可以检查数组的长度removeFile，然后使用函数附加数据.join()。我还添加了一个实时计数器。从数组中删除文件后检查剩余的文件数量filesToUpload。此外，如果您单击按钮，Upload您将看到需要controller以.processingformData现场演示：（我也为每一行添加了注释供您参考）$(document).ready(function(readyEvent) {&nbsp; var filesToUpload = []; //store files&nbsp; var removeFile = []; //remove remove files&nbsp; var fileCounter = 0; //count files&nbsp; //upload file&nbsp; $('#upload_requiremnt_files').on('change', function() {&nbsp; &nbsp; $("#upload_prev").html('');&nbsp; &nbsp; fileCounter = this.files.length; //count files&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Store all files to our main array&nbsp; &nbsp; var files = this.files;&nbsp; &nbsp; for (var i = 0; i < files.length; i++) {&nbsp; &nbsp; &nbsp; filesToUpload.push(files[i]);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Push file to remove file to that we can match to remove file&nbsp; &nbsp; for (var i = 0, f; f = files[i]; i++) {&nbsp; &nbsp; &nbsp; removeFile.push('<div class="filenameupload" id="' + i + '"&nbsp; fileName="' + f.name + '" >' + f.name + '<p class="close" ><i class="fa fa-window-close" aria-hidden="true"></i></p></div>');&nbsp; &nbsp; }&nbsp; &nbsp; //Append Remove file icon to each file&nbsp; &nbsp; if (removeFile.length) {&nbsp; &nbsp; &nbsp; $("#upload_prev").html(removeFile.join(""));&nbsp; &nbsp; }&nbsp; &nbsp; //Show counter&nbsp; &nbsp; $('#upload_count').show().text('Total Files To Upload = ' + fileCounter)&nbsp; });&nbsp; //Remove files&nbsp;&nbsp; $(document).on('click', '.close', function() {&nbsp; &nbsp; var i = $(this).parent().attr("id"); //get index&nbsp; &nbsp; var fileName = $(this).parent().attr("fileName"); //get fileName&nbsp; &nbsp; //Loop through all the file and remove Files&nbsp; &nbsp; for (i = 0; i < filesToUpload.length; ++i) {&nbsp; &nbsp; &nbsp; if (filesToUpload[i].name == fileName) {&nbsp; &nbsp; &nbsp; &nbsp; //Remove the one element at the index where we get a match&nbsp; &nbsp; &nbsp; &nbsp; filesToUpload.splice(i, 1);&nbsp; &nbsp; &nbsp; &nbsp; removeFile.splice(i, 1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; //Remove file from DOM&nbsp; &nbsp; $(this).parent().remove();&nbsp; &nbsp; //Decrease counter&nbsp; &nbsp; fileCounter--&nbsp; &nbsp; //Update counter&nbsp; &nbsp; if (fileCounter > 0) {&nbsp; &nbsp; &nbsp; $('#upload_count').text('Total Files To Upload = ' + fileCounter)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('#upload_count').hide()&nbsp; &nbsp; }&nbsp; })&nbsp; //Demo Upload button&nbsp; $(document).on('click', '#upload_file', function() {&nbsp; &nbsp; if (filesToUpload.length) {&nbsp; &nbsp; &nbsp; alert(filesToUpload.length + ' files will be sent to controller')&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert('Nothing to upload')&nbsp; &nbsp; }&nbsp; })});<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>