时间戳

首页 > 解决方案 > 如何使用 jQuery 和 AJAX 上传多个文件？

javascript - 如何使用 jQuery 和 AJAX 上传多个文件？

问题描述

我有特定的要求，需要input type="file"动态构建的字段。这可能因必须为特定记录上传的文件数量而异。到目前为止，我能够开发创建输入字段的代码。但是，我正在努力为每个单独的输入字段收集上传的文件。此外，还应验证这些文件。请看下面的例子。

let filejson = ['File1.txt', 'File2.txt', 'File3.txt'];
let arr_elem = [];

$.each(filejson, function(key, filename) {
  arr_elem.push('<div>&#9654; <span id="file-name-' + key + '">' + filename + '</span><input type="file" id="upload-file-' + key + '" class="upload-files" style="width: 100%;" placeholder="' + filename + '"></div>');
});
arr_elem.push('<button id="btn-file-submit">Submit</button>');
$("#file-section").html(arr_elem.join(''));

$("#file-section").on("click", "#btn-file-submit", function() {
  let files = $(".upload-files");
  files.each(function(i, obj) {
    console.log(i);
    console.log(obj.files[i]);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="file-section"></div>

在上面的示例中，尝试在第二个或第三个输入文件字段中上传文件。这些文件将返回为undefined. 只有第一个输入字段能够上传文件。有没有办法捕获所有输入字段文件？谢谢。

标签： javascriptjqueryjquery-file-upload

解决方案

推荐阅读