问题标签 [fileapi]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
6242 浏览

javascript - HTML5 File API 简单检查文件是否存在

我有一个临时文件 API 存储 (HTML5),但我无法检查文件是否存在。有没有简单的检查方法?我是否必须实际尝试阅读文件才能找到答案?

周围的搜索没有给我带来任何具体的结果

同步检查会很好,这可能吗?

0 投票
2 回答
3516 浏览

html - 尝试在谷歌浏览器中使用 HTML5 文件 api 时出现 FileError

我试图使用 chrome 中的文件系统 API 创建一个文件。最初我尝试如下持久存储

它最初工作正常。但是现在当我尝试相同的代码时给了我以下错误

然后我尝试了 TEMPORARY 文件存储如下

这给了我一些带有代码 2 的 FileError,这意味着安全错误。谁能帮我解决这些问题?

0 投票
3 回答
4869 浏览

html - 可以从 webkitStorageInfo.queryUsageAndQuota() 获得哪些详细信息

webkitStorageInfo.queryUsageAndQuota() 用于查找已使用 HTML5 文件系统 API 存储在文件系统中的文件的使用情况统计信息。谁能给我在提供给此函数的回调中可以获得的详细信息。

0 投票
1 回答
1290 浏览

jquery - jQueryUI 可排序 + HTML5 文件 API 示例?

有谁知道任何将 jQueryUI:Sortable:display-grid 与 HTML5 File API 结合以显示将多个本地图像同时放入浏览器的好示例,然​​后所有这些图像都显示在显示网格中?

参考: http:
//jqueryui.com/demos/sortable/#display-grid
http://html5demos.com/file-api
当用户使用 HTML5 文件 API 按下按钮时,如何读取本地文件?

0 投票
2 回答
543 浏览

javascript - jQuery/HTML5 FileAPI:为什么似乎没有触发拖动事件?

当我将文件拖到 imageContainer div 上时,为什么这里什么也没发生?控制台中没有任何内容,页面上没有任何内容等。

0 投票
1 回答
691 浏览

jquery - jquery-html5-upload 问题(点击按钮上传文件)

我无法使用此插件在单击按钮时上传文件的正确方法。

https://github.com/mihaild/jquery-html5-upload

在文档中它说:

选项

活动

除了插件使用的“change”之外的所有事件都有前缀“html5_upload.”。

插件使用的事件

不建议为本事件手册设置处理程序。

start开始上传选定的文件

cancelOne取消当前上传文件的上传

cancelAll取消当前上传

删除插件工作的痕迹

https://github.com/mihaild/jquery-html5-upload#options

我希望能够做这样的事情。

谢谢你。

0 投票
1 回答
460 浏览

javascript - 当用户进行文件更改时,FileAPI 不会更新文件大小(非 webkit 浏览器)

我想我会先用一个例子来证明这个问题,

jsfiddle: http: //jsfiddle.net/e2UfM/15/ (使用 FF 12 和 Chrome 18.0.1025.168 测试)

用法:

  • 从本地计算机加载文本文件。
  • 点击“加载文件”。
  • 点击“显示文件大小” - 注意大小。
  • 在本地机器上修改并保存文本文件。
  • 再次点击“显示文件大小”。请注意在 webkit 浏览器 (Chrome) 中文件大小如何变化,但在 Firefox 中它没有更新文件大小

当用户更改他们选择的本地文件时,非 webkit 浏览器不会更新其大小属性,而 Chrome 会这样做。两种浏览器都会更新文件的内容。

有没有办法让 Firefox 更新文件大小,就像 Chrome 在这种情况下所做的那样?


简单的真实世界示例:

用户选择了一个对于表单来说太大的文件,他们点击提交按钮并收到通知他们的文件太大(通过警报、“大小”栏(见下文)等)

他们在本地修改文件,然后再次点击提交。

在 Chrome 中,文件大小会更新。当用户再次点击提交按钮时,它将再次验证它的更新大小并允许上传。在 Firefox 中,用户必须重新选择表单上的文件才能看到文件大小的变化。

Firefox 的部分解决方法 - @ZER0 的回答


真实世界的例子(深入):

如果我没记错的话,文件 API 的一个目的是在上传到服务器之前验证客户端的文件大小。

考虑表单中有 2MB 上传限制并且用户选择 1MB 文件的场景。Firefox 和 Chrome 都会看到文件大小小于 2MB 并将其添加到表单中。我们还假设有一个简洁的栏显示他们选择的文件有多大,以及它是否符合文件大小限制:

用户选择的 1MB 文件!

但是随后用户决定在提交表单并将大小超过 2MB之前在本地对该文件的内容进行微小的更改。

在 Google Chrome 中,我可以在客户端优雅地处理这个问题。当用户提交表单时,我可以再次检查文件大小,并在将其发送到服务器之前验证它实际上仍然低于 1MB。但即使在用户提交表单之前,在 Chrome 中,我也可以动态更新小条图像,因为它们在本地进行更改,如下所示:

现在文件超过 2MB,糟糕!

如果用户正在填写大型表单,则此“栏”(或即时通知上的任何其他表单,例如警报)很有用。我希望用户在他们的文件太大时立即知道,以便他们可以更正它,而不仅仅是在他们提交表单时。

在 Firefox 中,因为文件大小永远不会更新,它会很乐意上传 2MB 的文件,认为它仍然是 1MB!我使用服务器端逻辑来仔细检查文件大小,但我宁愿节省服务器行程。


我是如何遇到这个错误的:

上述示例与更多人相关,因为更多人可能处理过表单中的文件上传,而不是使用File API 中的 slice 函数。这就是我遇到问题的具体方式。

在我的表单中,用户选择了一个文件,当他们点击提交时,屏幕上只显示最后 10,000 个字节,textarea以确认它确实是他们想要的文件。

考虑一个50,000字节大小的文件。用户在表单中选择它,Chrome 和 Firefox 都40,000 - 50,000textarea.

现在用户向文件添加了一些内容,并将相同的文件转换为70,000字节!

Google Chrome 将正确更新textarea以包含 bytes 60,000-70,000。在 Firefox 中,因为大小将保持不变,它仍然只会显示范围内的字节40,000-50,000


编辑:更新了 jsfiddle 以证明 FF 仍然可以读取更新的文件内容。只是文件大小不会随着这些新内容而改变。

编辑: https ://bugzilla.mozilla.org/show_bug.cgi?id=756503 (错误报告)

编辑:已添加和更新示例以响应@Eduárd Moldován 的评论和@ZER0 的回答。谢谢!

0 投票
1 回答
163 浏览

html - HTML5 - 如何检测文件是否可访问

在我的应用程序中,我使用 HTML5 File API 将文件上传到服务器,但是我遇到了无法访问文件的情况,因为它正在被另一个进程使用。这实际上在 Firefox 和 chrome 中创建了两种不同的错误条件。有没有办法使用 html5 检测文件是否无法访问?

0 投票
1 回答
2973 浏览

javascript - 如何使用 javascript 或 Jquery 获取 IE 浏览器的文件大小?

我在 IE 浏览器上使用过 ActiveXObject,但它不工作。我在 js 中获得了其他浏览器的文件大小,但无法获得 IE 浏览器的文件大小。我为此使用了以下代码:-

谁能帮我获取 IE 浏览器的文件大小。我已经完成了所有想法,但无法获得 IE 浏览器的文件大小。请为此提供想法或代码...

0 投票
3 回答
37612 浏览

javascript - IE 8/9 中 FormData 的后备

IE 8/9 中不存在FormData ,但我需要这些浏览器中的该功能。有一个很好的后备方案吗?

我会尝试通过 json 数据发送,但我需要将文件传递给服务器。我将此文件附加到formData现代浏览器中,然后提交一个XHR请求。因为FormData在 IE 8/9 中不存在这显然失败了。

也许另一种方法是在 js 中创建一个假表单对象,然后将数据附加到该对象?