标签: fileapi

我有一个文件输入: (jsbin)

 <input type="file"   accept="image/*" id="input" multiple   onchange='handleFiles(this)' />

选择文件时,显示所选图像的小图像:

我可以用两种方式做到:

使用FileReader:

function handleFiles(t) //t=this
{
    var fileList = t.files;
    for (var i = 0; i < fileList.length; i++)
    {
        var file = fileList[i];
        var img = document.createElement("img");
        img.style... = ...
        document.getElementById('body').appendChild(img);
        var reader = new FileReader();
        reader.onload = (function (aImg)
        {
            return function (e)
            {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
    // ...
}

使用ObjectURL/BLOB:

 function handleFiles(t)
 {
     var fileList = t.files;
     for (var …

系统配置:macOS Sierra 10.12.5; 铬60;

我试图将JSON数据(响应对象)作为json文件下载,但是当我尝试使用浏览器File()对象实现此目的时,它会出错

Failed to construct 'File': Iterator getter is not callable.

下面是我的代码

//`inputData` is the valid response getting from $http.get
var stringifyData = JSON.stringify(inputData);
console.log("stringifyData ", stringifyData);
var file = new File(blob, "filename.json", {type: "text/json;charset=utf-8"});
console.log("file", file);

问题是什么以及我收到此错误的原因.当我使用JSON.stringify(inputData, undefined, 4);它然后它没有给出错误并在控制台中显示正确的对象.

我正在使用我正在构建的移动网络应用程序的文件录制功能:

<input id="file-camcorder" type="file" name="camcorder" accept="video/*" capture="camcorder"></input>

我想知道是否有办法以某种方式限制录制的视频长度,或者以某种方式通知用户他们的录制时间过长.问题是,当您选择在移动设备上录制时,您将被从Web应用程序中删除,因此我不知道在用户使用手机的本机录制应用程序时与用户进行任何交互.

如果有人有任何想法,那就太好了.谢谢!

特别参考HTML5 FileAPI.

我正在阅读W3C规范提案,并且可以从这里阅读:http://www.w3.org/TR/file-system-api/

"该文件的工作已经停止,不应作为实施的基础参考或使用."

是FileAPI不再是一个HTML5规范还是意味着它的实现细节将只是改变？

我遇到了一个奇怪的问题FileReader.readAsArrayBuffer,这似乎只影响Firefox(我在当前版本中测试过 - v40).我不知道我是做错了还是这是一个Firefox bug.

我有一些JavaScript readAsArrayBuffer用于读取<input>字段中指定的文件.在正常情况下,一切正常.但是,如果用户在<input>字段中选择后修改文件,readAsArrayBuffer可能会非常困惑.

将ArrayBuffer我从后面readAsArrayBuffer总是有该文件最初的长度.如果用户更改文件以使其更大,我不会获得原始大小后的任何字节.如果用户更改文件以使其变小,则缓冲区仍然具有相同的大小,并且缓冲区中的"多余"填充有字符代码90(如果被视为字符串则为大写字母'Z').

由于此代码非常简单,并且在我测试的其他所有浏览器中都能完美运行,因此我认为这是一个Firefox问题.我已经将它报告为 Firefox的一个错误,但我想确保这不仅仅是我做错了.

可以通过以下代码段重现该行为.你所要做的就是:

1. 浏览一个包含10个字符的文本文件(10个不是幻数 - 我只是以它为例)
2. 观察结果是一个包含10个项目的数组,表示每个项目的字符代码
3. 当它仍在运行时,从文件中删除5个字符并保存
4. 观察结果仍然是10个项目的数组 - 前5个是正确的,但最后5个都是90个(大写字母Z)
5. 现在添加了10个字符(所以文件现在长15个字符)
6. 观察结果仍然是10个项目的数组 - 最后5个不返回

function ReadFile() {
  var input = document.getElementsByTagName("input")[0];
  var output = document.getElementsByTagName("textarea")[0];

  if (input.files.length === 0) {
    output.value = 'No file selected';
    window.setTimeout(ReadFile, 1000);
    return;
  }

  var fr = new FileReader();
  fr.onload = function() {
    var data = fr.result;
    var array = new …

mozilla和webkit浏览器现在都允许上传目录.当在<input type="file">元素中选择目录或目录或在元素处删除目录或目录时,如何按照它们在firefox和chrome/chromium的实际目录中出现的顺序列出所有目录和文件,并在迭代所有上载的目录时对文件执行任务？

我在Mac OS X上使用Chrome 12,我在文档中包含了jQuery 1.6.1.

我尝试将文件的内容作为文本读取,并使用以下函数将其保存在数据对象中:

this.upload = function(file) {
    console.log('FileHandler.upload called with ' + file.name + '.');
    console.log(file);
    console.log(this.reader);

    data = {
        content: this.reader.readAsText(file)
    }

    console.log('Content: ' + data.content);
}

"file"接缝是有效的文件对象,"this.reader"是FileReader类型的新实例.此代码创建以下控制台输出:

http://cl.ly/1Y2b383G2F272x1m1P0N

我正在玩FileSystem API.

我发现了很多例子,你生成一个下载链接让用户下载文件"浏览器方式".

我想知道两件事:

1. 有没有办法将小提琴中的ajax结果直接写入磁盘(没有任何类型的提示).比如用户的桌面.

2. blob是最合适的格式吗？

http://jsfiddle.net/FBGDe/

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL = window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://www.newyorker.com/online/blogs/photobooth
                                                       /NASAEarth-01.jpg');
xhr.responseType = 'blob';
xhr.send();      

我正在制作一个html界面,使用拖放和多个选择文件在服务器上上传图像.我想在将图片发送到服务器之前显示图片.所以我首先尝试使用,FileReader但我在这篇文章中遇到了一些问题.所以我改变了方式,我决定在帖子中使用blob:url,就像ebidel推荐一样,使用window.URL.createObjectURL()和window.URL.revokeObjectURL()释放内存.

但现在,我有另一个问题,与此类似.我希望客户可以随时上传200张图片.但浏览器崩溃了,使用的ram非常高!所以我认为可能同时显示的图像太多了,我使用数组设置了一个等待文件队列的系统,以便每次只处理10个文件.但问题仍然存在.

在谷歌浏览器上,如果我检查chrome://blob-internals/文件(通常已经发布的文件window.URL.revokeObjectURL())在延迟8秒后大约会被释放.在Firefox上我不确定,但似乎文件没有发布(我检查about:memory- >图像)

我的代码是坏的,还是独立于我的问题？是否有解决方案迫使导航员立即释放内存？如果它可以提供帮助,这是问题发生的JavaScript的一部分:(抱歉,我在这里给出了一个链接,因为新成员的图像垃圾邮件机制)http://www26.zippyshare.com/v/14195278/file. HTML.

编辑

这是一种自己的答案+对bennlich的答案(评论的文字太长)

我从user1835582的答案中了解到我确实可以删除Blob/File但是当浏览器需要图像时它会将它们保存在内存中(这是合乎逻辑的).所以显示图像(许多和重)让我崩溃和减速,而不是revokeObjectURL方法.而且,每个浏览器都以自己的方式管理内存,导致不同的行为.以下是我得出这个结论的方法.

首先,让我们尝试revokeObjectURL使用https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images的源代码的简单示例.使用Chrome,您可以通过检查chrome://blob-internals/或尝试将显示的图片打开到空白的新标签中来验证Blob是否已被撤销.注意:要完全释放Blob引用,请添加document.getElementById("fileElem").value = "".当我几年前发布我的问题时,发布blob大约需要8秒,现在几乎是即时的(可能是由于Chrome和/或更好的计算机的改进)

然后,进行充电测试的时间.我做了一百个每个约2.5Mo的jpg.显示图像后,我滚动页面.Chrome崩溃,Firefox速度很慢(未在其他浏览器上测试过).然而,当我评论li.appendChild(img)一切顺利时,即使有一大堆图像.这表明问题不是来自revokeObjectURL实际上正常工作的方法,而是来自显示大量沉重图像的方法.您还可以测试创建一个包含数百个重图像的简单html页面并滚动它=>相同的结果(崩溃/减速).

最后,为了更深入地了解图像内存管理,在Firefox上调查内存很有意义:内存.例如,我看到当窗口处于活动状态时,Firefox解压缩图像(图像 - >未压缩堆上升),而raw(图像 - >原始)总是稳定的(相对于加载的图像数量).这里有关于内存管理的很好的讨论:http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory.

我知道没有blob网址只有对象.
我为视频缓冲区创建了自己的blob对象,然后在视频标记的src中使用它,类似于blob://website.com/blablobbla.我在它工作的浏览器中打开了这个url

当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了

我想知道如何对我的blob网址执行相同操作,以便它们只能在html视频标记的src中工作,并且在浏览器的外部选项卡/窗口中发出错误或不起作用.我只是想知道这个和blob对象及其url属性背后的技术.