- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这段代码,我可以循环访问多个输入文件类型中的文件
$(function(){
$('#main-input').change(function(){
var files = $('#main-input')[0].files;
for (var i = 0, f; f = files[i]; i++) {
alert(files[i].name);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="main-input" multiple>
我想要实现的是克隆主输入(#main-input)并根据循环文件给出一个值(文件)。有什么想法、建议吗?或者这可能吗?
最佳答案
是的,这个要求是可能的。您需要创建一个新的 FileList
对于每个 File
对象,然后设置 .files
<input type="file">
的属性(property)元素到FileList
填充有 File
对象。
下面的代码在 Chromium 62+ 和 Firefox 57+ 上返回相同的结果,请参阅 @Kaiido 的评论以获取评估 Safari和 Edge .
// FileList.js
class FileList {
constructor(...items) {
// flatten rest parameter
items = [].concat(...items);
// check if every element of array is an instance of `File`
if (items.length && !items.every(file => file instanceof File)) {
throw new TypeError("expected argument to FileList is File or array of File objects");
}
// use `ClipboardEvent("").clipboardData` for Firefox, which returns `null` at Chromium
// we just need the `DataTransfer` instance referenced by `.clipboardData`
const dt = new ClipboardEvent("").clipboardData || new DataTransfer();
// add `File` objects to `DataTransfer` `.items`
for (let file of items) {
dt.items.add(file)
}
return dt.files;
}
}
document.querySelector("input[type=file]")
.onchange = e => {
for (let file of e.target.files) {
const input = document.createElement("input");
input.type = "file";
input.files = new FileList(file);
document.body.appendChild(input);
}
}
<input type="file" multiple>
// FileList.js
function _FileList(items) {
// flatten rest parameter
items = [].concat.apply([], [items]);
// check if every element of array is an instance of `File`
if (items.length
&& !items.every(function(file) {
return file instanceof File})) {
throw new TypeError("expected argument to FileList is File or array of File objects");
}
// use `ClipboardEvent("").clipboardData` for Firefox, which returns `null` at Chromium
// we just need the `DataTransfer` instance referenced by `.clipboardData`
var dt = new ClipboardEvent("").clipboardData || new DataTransfer();
// add `File` objects to `DataTransfer` `.items`
for (var i = 0; i < items.length; i++) {
dt.items.add(items[i])
}
return dt.files;
}
document.querySelector("input[type=file]")
.onchange = function(e) {
for (var i = 0; i < e.target.files.length; i++) {
var input = document.createElement("input");
input.type = "file";
input.files = new _FileList(e.target.files[i]);
document.body.appendChild(input);
}
}
<input type="file" multiple>
关于javascript - 根据主输入类型="file"(多个)元素创建多个输入类型="file"元素及其对应的值(FileList),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48257041/
这是一个简单的图像文件列表。 Object.keys(pet).forEach((key) => { if (key === "images") { formData.ap
我有一个类型为 "file" 的 input,我想更改它的 files 列表。示例: document.getElementById("fileinput").files = [10]; 问
我有: 每次用户选择一个文件时,我都会通过将 f.files 的每个元素推送到一个数组来构建所有选定文件的列表: var Files = []; function c() { for (var
我正在使用 FormData 上传我的 grails 项目中的多个文件。这些文件需要通过 Ajax 上传。我使用以下代码进行ajax上传。但在 Controller 中,我得到的参数为 [object
我有一个文件列表对象,其中包含 1000 多个图像文件。我希望对象按文件名(字母数字)排序。换句话说,我想做一个自然排序。文件名如下: d_1_ct.png d_2_ct.png d_3_ct.png
是否可以拆分 FileList实例(来自放置事件,event.dataTransfer.fileList),并将其中的每个文件分配给一个个体 元素? 例如,将放置事件中的所有文件(1 个或多个...)
使用 javascript 中的 fileReader 预览选定的文件 if i remove from previewed image. it must delete from selected f
有代码https://jsfiddle.net/bfzmm1hc/1一切看起来都很好,但我想从集合中删除一些文件。 我已经找到了这些: How to remove one specific selec
我有一个函数可以处理我页面上的拖放文件: function createDropHandlers() { var target = document; if (target === null)
我有一个 FileList 对象,其中包含以前上传的文档。我正在尝试使用另一个函数通过使用另一个 FileList 对象将更多文件添加到此集合中,因此我需要将辅助 FileList 对象“附加”到主要
我试图围绕一个特定的 for 循环声明来思考,但到目前为止我没有成功。代码片段允许您读取文件输入并通过 for 循环遍历所有对象: function handleFileSelect(evt)
我想使用 Typescript 使用 for in 循环遍历 FileList。我从一个常规的旧 for 循环开始,这非常有效: let files:FileList = e.target.files
我正在尝试创建一个拖放区域,它将通过 webkitGetAsEntry 获取 dataTransfer 项目,并检查该条目是目录还是文件。 然后我希望能够将文件制作成文件列表并将其复制到文件输入(将在
我正在尝试使用新的文件 API 对输入文件进行排序。它返回的列表似乎是不可变的: var x = ""; var files = e.target.files; // FileList object
文档:https://developer.mozilla.org/en-US/docs/Web/API/FileList 为什么 FileList 是对象而不是数组?它拥有的唯一属性是 .length
我正在使用 HTML5 构建一个拖放式上传 Web 应用程序,我将文件拖放到一个 div 上,当然还获取了 dataTransfer 对象,这为我提供了 FileList . 现在我想删除一些文件,但
我正在使用一个名为 react-dropzone 和 React-Redux 的 Node 包模块来允许用户将文件拖到窗口上并显示文件信息。 react-dropzone 组件为我提供了标准 even
我对前端开发非常陌生,我认为向当前上传页面添加拖放功能会很酷。然而,在开始使用 ng-flow (帮助拖放的指令)连接所有内容之后,我似乎无法建立有关如何将文件添加到文件列表的连接。如果您认为我什至不
我在 res/raw 文件夹中有一个 xml 文件,我想在我的应用程序中使用它。为什么我在真实设备上调试时 fileList() 看不到它? 最佳答案 ContextWrapper的fileList(
我正在研究谷歌驱动器集成。我已经使用谷歌控制台获取了 api 访问 key ,也完成了 oauth2 身份验证。我已经使用了谷歌日历集成并且它工作正常但是当我集成想要检索文件列表的驱动器时,它的返回为
我是一名优秀的程序员,十分优秀!