标签: fileapi

我想知道,如果在Chrome中公开新的File API(我现在不关心跨浏览器支持),那么可以回写通过文件输入打开的文件.

你可以看到我在这里要完成的一个例子:http://www.grehz.com/ide.

我知道我可以使用服务器端脚本动态创建文件并允许用户正常下载它们.我希望有一种方法可以实现这个纯粹的客户端.我读过你可以写入通过文件输入打开的文件的地方.虽然我已经看到传递对FileWriter类的引用,但我还是找不到任何这样的例子.

如果这是不可能的话,我会完全不会感到惊讶(这似乎存在安全问题).只是寻找一些指导或资源.

更新:

我在这里阅读:http://dev.w3.org/2009/dap/file-system/file-writer.html

正如我在Chrome中玩的那样,看起来FileSaver和FileWriter没有实现,但是BlobBuilder是.我可以在BB对象上调用getBlob(),有没有什么方法可以在没有FileSaver或FileWriter的情况下保存它？

UPDATE2:

我在Chromium项目中发现了这个问题:http://code.google.com/p/chromium/issues/detail？id = 65615&q = FileSaver&cfpec = ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified %20Owner%20Mstone%20OS

所以很明显它还没有在任何版本中实现(但是,没有提到FileWriter - 尽管我认为FileWriter依赖于FileSaver).

远离那个,我正在考虑一个服务器端解决方案.当用户单击"保存"时,textarea的内容将发布到脚本,然后该脚本将写入页面并以明文或任何适合用户下载的mime类型发回.还有其他建议吗？这个解决方案适用于"另存为",但它作为通用保存按钮有点笨重.

这是我的示例代码:

var input = document.createElement('input');
input.type = 'file';
document.body.appendChild(input);

input.addEventListener('change', function(){
    var file = input.files[0];

    var reader = new FileReader();
    reader.onload = function(e){
        var image = new Image();
        image.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

加载页面,选择一个大图像(我使用的是2.9MB 4288x3216图像).刷新页面并选择相同的图像.结果？标签崩溃了!(噢,Snap!)

我的猜测是,这是Chrome实施File API的一个错误,但如果有人能够确认,甚至可能提供解决方法,我会喜欢它.我真的希望能够显示照片的缩略图,而不必去服务器生成一个(即使它仅适用于Chrome和FF).

此外,使用上面的示例代码,只要您选择照片,该选项卡就会开始使用大约32MB的内存.我想,这是预期的,但令我担心的是内存似乎永远不会被垃圾收集器释放.因此,如果我继续选择更多照片,我会继续消耗更多内存.我不知道这是否与崩溃问题有关,但这绝对是一个问题.

谢谢你的帮助!

我想用Html5实现可恢复的上传,除了确定要上传的文件是已经部分上传的文件外,一切似乎都有效.理想情况下,我会对生成唯一ID的文件进行客户端散列 - 但是我找不到它的任何工作实现,对于大文件来说似乎太慢了(就像我正在处理的那样).

接下来,我考虑使用文件的路径作为唯一标识符,但我没有看到任何方法从API获取它.文件名,即使考虑每个用户的文件名也不能是唯一的,因为用户往往具有文件的通用名称.任何人都可以为此考虑解决方案？

我需要File从文件输入序列化一个对象，以便可以保存该对象，解析回文件对象，然后使用该FileReader对象进行读取。

有谁知道这在谷歌浏览器中是否可行？

我认为问题在于 file.path 属性的保护。Webkit 浏览器隐藏了这个属性，所以我猜当你序列化它时，路径被删除了。

那么当然，如果没有路径信息，FileReader 将无法读取它。

下面是一个例子：

var files = uploadControl.files[0];
var dataFile = JSON.stringify(files);
var newFile = JSON.parse(dataFile);
var reader = new FileReader();
reader.onload = (function(event) {
    var fileContents = event.target.result;
});
reader.readAsText(newFile);

没发生什么事。读取器未加载。如果我传递 JSON 对象，它也不起作用。

我有64000个小图像,我想上传到我的网站(使用现有的验证,所以没有FTP等).我为此创建了一个HTML5 [multiple] type = file输入,用于一百或几百个图像.数百不是问题.图像被批处理并发送到服务器.

但是当我选择~16000个图像的文件夹时,文件输入的FileList为空... onchange事件触发,但文件列表为空.浏览器(或文件系统或操作系统？)似乎在选择这么多文件时遇到问题.

我创建了一个非常小的工具来帮助确定最大可能的内容:http://jsfiddle.net/rudiedirkx/Ehhk5/1/show/

$inp.onchange = function(e) {
    var l = 0, b = 0;
    for (var i=0, F=this.files, L=F.length; i<L; i++) {
        l += F[i].name.length;
        b += F[i].size;
    }
    $nf.innerHTML += this.files.length + ' files: ' + (b/1000/1000) + ' MB / ' + l + ' chars of filename<br>';
};

所有这一切都是重要的:

• 文件数量
• 所有文件名组合在一起的字符数
• 总文件大小的MB数

当我尝试这个时,我得到的最多:

1272个文件:176.053987 MB/31469个文件名字符

(在32位和64位Win7上,Chrome 26-52)

下一张图片(失败)将是:

• 1273张图片,这不是一个明显的截止
• 介于176和177 MB之间的文件大小,也不是一个明显的截止
• 少于32000个文件名字符,也不是一个明显的截止,虽然它可能看起来像32k ......

在我的计算中,1 MB = 1000 ^ 2字节,而不是1024 …

我试图从文件系统的iOS文件.我的文件位于:

console.log(PATH);
--> file:///var/mobile/Applications/B816F30B-791A-43E5-B33A-A26075E8B585/Documents/123123123.wav

现在,我想获得File通过文件API

window.resolveLocalFileSystemURL(PATH, function(fileEntry){
    console.log(fileEntry.fullPath); // /var/mobile/Applications/B816F30B-791A-43E5-B33A-A26075E8B585/Documents/123123123.wav
    console.log(fileEntry.name); // 123123123.wav
    console.log(fileEntry.toURL()); cdvfile://localhost/temporary/var/mobile/Applications/B816F30B-791A-43E5-B33A-A26075E8B585/Documents/123123123.wav

    fileEntry.file(function(file){
        // do stuff
    }, function(error){
        console.log(error);
    });
});

在FileEntry被发现,但是当我打电话file(),我得到一个FileError看起来像这样:

[Log] FileError (main.js, line 15569)
    code: 1
    __proto__: FileError

ErrorCode 1是:NOT_FOUND_ERR.

为什么在找到NOT_FOUND_ERR FileEntry并且日志记录看起来没问题时会得到它？

我正在尝试使用File API从blob对象创建一个图像文件,然后将其添加到要通过XHR发送的表单中.像Chrome中的魅力一样,但崩溃了Microsoft Edge中的应用程序.

let file = new File([blobContent], "image.png");

let form = new FormData();
form.append("file", file);

是否有文件API的替代方法或将文件附加到表单的变通方法？如果我只是将blob添加到表单中,则它不会被识别为图像.

谢谢!

今天我遇到了一个有趣的事情,如FF File API和按类型分开的文件.好的,这里有一个小片段

if (!input.files[0].type.match('image.*')) {
            window.alert("Select image please");
            return;
        }

它控制图像只读.但是例如doc文件和pdf呢？我找不到这个有用的例子,所以我希望你能分享一些片段.我有兴趣检测不同的文件类型但我如何使用JS及其type.match绑定来控制不同的文件类型？

这是基本代码

任何有用的评论是赞赏:)

我正在尝试编码和解码图像.我正在使用FileReader的readAsDataURL方法将图像转换为base64.然后将其转换回来我尝试过使用 readAsBinaryString()并且atob()没有运气.有没有另一种方法来保持图像没有base64编码吗？

readAsBinaryString()

开始读取指定Blob的内容,可能是文件.当读取操作完成时,readyState将变为DONE,并且将调用onloadend回调(如果有).那时,result属性包含文件中的原始二进制数据.

知道我在这里做错了吗？

示例代码 http://jsfiddle.net/qL86Z/3/

$("#base64Button").on("click", function () {
    var file = $("#base64File")[0].files[0]
    var reader = new FileReader();

    // callback for readAsDataURL
    reader.onload = function (encodedFile) {
        console.log("reader.onload");
        var base64Image = encodedFile.srcElement.result.split("data:image/jpeg;base64,")[1];
        var blob = new Blob([base64Image],{type:"image/jpeg"});
        var reader2 = new FileReader();

        // callback for readAsBinaryString
        reader2.onloadend = function(decoded) {
            console.log("reader2.onloadend");
            console.log(decoded); // this should contain binary format of the image

            // console.log(URL.createObjectURL(decoded.binary)); // Doesn't work
        };
        reader2.readAsBinaryString(blob);

        // console.log(URL.createObjectURL(atob(base64Image))); // Doesn't work

    };
    reader.readAsDataURL(file); …

JavaScript进程生成大量数据(200-300MB).我想保存这些数据以供进一步分析,但到目前为止我发现的最好的是保存使用这个例子http://jsfiddle.net/c2U2T/这对我来说不是一个选项,因为看起来它需要所有数据在开始下载之前可用.但我需要的是类似的东西

var saver = new Saver();
saver.save(); // The Save As ... dialog appears
saver.onaccepted = function () { // user accepted saving
    for (var i = 0; i < 1000000; i++) {
        saver.write(Math.random());
    }
};

当然,而不是Math.random()将是一些有意义的构造.