- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个函数可以处理我页面上的拖放文件:
function createDropHandlers() {
var target = document;
if (target === null) {
return false;
}
// attach the 'dragover' event to the container
target.addEventListener('dragover', function(event) {
event.preventDefault();
}, true);
// attach the 'drop' event to the container
target.addEventListener('drop', function(event) {
event.preventDefault();
var files = event.dataTransfer.files;
// if (files.length > 3)
// do something like
// files.slice(files.length-3, files.length);
for (var i = 0; i < files.length; i++) {
processFile(files[i]);
// ...
}
}, true);
}
我想做的是在我的 for
循环之前(以及在以任何方式“处理”文件之前)检查是否有超过 3 个文件被拖动,如果是这样,就将“数组”到最后 3 个元素。我知道 FileList
是只读的,所以我不确定我在这里有什么选择来实现这一目标......
我不会上传文件,在“处理”它们之后,我将不再需要任何 File
对象。我需要做的就是检查文件是否是音频文件,从中读取一些元数据并在页面上显示元数据。
最佳答案
slice() 是 Array 原型(prototype)中的一个方法。虽然它返回一个新数组,但它可能不在 FileList 原型(prototype)中。您可以使用 Array.prototype.slice 方法并将其应用于文件列表:
Array.prototype.slice.call( fileList ); //will return an array-copy of the filelist
Array.prototype.slice.call( fileList, 0, 3 ); //Then simply use the slice arguments at your convenience
您也可以在参数上使用(并且会经常在 js 库代码中看到)这个技巧。请注意,slice 不会像 splice() 那样修改原始对象。
你可以查看https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice#Array-like有关 MDN 的解释。
关于javascript - 从删除的 FileList 中删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15136624/
这是一个简单的图像文件列表。 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 身份验证。我已经使用了谷歌日历集成并且它工作正常但是当我集成想要检索文件列表的驱动器时,它的返回为
我是一名优秀的程序员,十分优秀!