标签: html5-filesystem

当强制通过window.location下载时,如何在JavaScript中设置blob文件的名称？

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

运行上面的代码会立即下载文件而不会刷新页面,如下所示:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

我想将文件名设置为my-download.json.

在做webkitRequestFileSystem的window.PERSISTENT选择谷歌浏览器,在那里我的文件系统做文件获取写的？我想在那里删除文件并让Chrome与他们互动,同时我正在构建和调试这个应用程序.

我试图在使用fs对象的文件上使用browserify.当我浏览它时,调用require('fs')不会被转换并require返回{}.

这有什么解决方法吗？我在stackoverlow和其他地方看到了一些建议,但似乎没有完全实现.

我实际上希望使用browserify为我教授的课程创建一个谷歌网络打包应用程序.

提前致谢.

所以这里有一个类似的帖子html-5-filesystem-access-type-error.但是,我对结论不是很满意,因为我觉得它实际上没有回答这个问题 - 给出的解决方案是不推荐使用的代码解决方案.有没有人知道如何使用navigator而不是window像Chrome控制台通知那样做？

我一直在使用以下它可以工作,但Chrome控制台一直告诉我不要这样做,因为它已被弃用.

工作不推荐的代码

window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024*280, function(grantedBytes) {
    window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
    console.log('Error', e); 
});

注意:onInitFs并且errorHandler它们都是在其他地方定义的功能.

控制台日志 - 我在控制台中收到的消息如下:

'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage'
or 'navigator.webkitPersistentStorage' instead. 

因此,最佳做法是停止使用已弃用的方法.不幸的是,当我window用navigator它更换崩溃时(见下文).如何使用navigator而不是window访问文件系统？

当我试图在IndexedDB的Chrome的非对应的斑点,我发现我可以作为arraybuffer通过AJAX读取图像,将其存储在索引资料,提取它,将其转换为一个blob,然后使用显示它在一个元素来创建一个解决方法以下代码:

var xhr = new XMLHttpRequest(),newphoto;
xhr.open("GET", "photo1.jpg", true);    
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        newphoto = xhr.response;
        /* store "newphoto" in IndexedDB */
        ...
    }
}

document.getElementById("show_image").onclick=function() {
    var store = db.transaction("files", "readonly").objectStore("files").get("image1");
    store.onsuccess = function() {
        var URL = window.URL || window.webkitURL;
        var oMyBlob = new Blob([store.result.image], { "type" : "image\/jpg" });
        var docURL = URL.createObjectURL(oMyBlob);
        var elImage = document.getElementById("photo");
        elImage.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    }
}

这段代码工作正常.但是,如果我尝试相同的过程,但这次装载的视频(.MP4)我不能表现出来:

...    
var oMyBlob = new Blob([store.result.image], …

我正在编写一个Web浏览器应用程序(客户端),它从许多位置下载大量的块并加入它们来构建blob.然后该blob作为公共文件保存到本地文件系统.我这样做的方式是使用ArrayBuffer对象和blob.

var blob = new Blob([ArrayBuffer1, ArrayBuffer2, ArrayBuffer3, ...], {type: mimetype})

这适用于中小型文件(直到700 MB aprox),但浏览器崩溃时文件较大.我知道RAM内存有其局限性.情况是我需要构建blob以生成文件,但我想让用户下载比这个大得多的文件(想象一下,例如,大约8GB的文件).

¿如何构建blob以避免大小限制？LocalStorage比RAM更受限制,因此我不知道该使用什么或如何使用它.

有没有办法在Web worker和主线程之间传递大量数据(多个MB)？我在一个项目中工作,我需要下载文件,稍微修改它们,然后以某种方式让用户下载修改后的文件.我找到了以下方法在Web worker和主UI之间传递数据

1. 使用常规postMessage方法.
2. 使用可传输对象(仅限Chrome)
3. 创建一个blob的URL引用,只发送URL(在Chrome中工作,在其他工作中也是如此？)

我认为(1)在发送较小的对象时很好,但是处理大于几MB的文件需要花费大量的时间和空间,因为它被序列化并作为JSON发送.Chrome提供了一种使用可转移对象传输数据的方法,其中不必复制数据.不幸的是,到目前为止,这只是Chrome的一项功能,因为它本来可以达到我的目的.

我发现的最后一件事是,从工作人员创建一个使用blob的URL self.webkitURL,然后只将URL引用传递给UI.这很好用,我可以将URL提供给用户,他们可以下载该文件.我遗憾的是没有找到办法在Firefox中做到这一点,是否可能？

有没有其他方法可以用来在工作者和主线程之间传输数据？

我正在尝试使用这里saveAs解释的接口

目前,我只担心谷歌Chrome,我使用最新的金丝雀(版本27.0.1429.0金丝雀)

Qn1:文章说.

W3C File API包含一个FileSaver接口,它可以将生成的数据保存为saveAs(数据,文件名),但不幸的是它最终会从规范中删除.

为什么会被删除？

Qn2:代码下方.

if (window.saveAs) {
    window.saveAs(blob, name);
}else{
    console.log("saveAs not supported")
}

版画

saveAs not supported 

所以chrome不支持saveAs.这不是我在网上阅读过很多文章的印象.

是否可以将HTML 5文件API(例如,此库:https://github.com/23/resumable.js)与S3多部分上载功能结合使用？

http://docs.aws.amazon.com/AmazonS3/latest/dev/uploadobjusingmpu.html

我正在制作一个应用程序来处理被拖动到应用程序的歌曲.当我使用它file.size来获取文件的大小时,需要大约1500毫秒(平均)来获得此值.有没有更快的方法？我理解为什么需要时间(和内存),但由于我是处理HTML5中的文件的新手,可能有一些我不知道哪些可以使这个过程更快.

文件系统API也是如此.如果我通过它调用文件并呼叫file.size,则需要相似的时间.

PS我通过添加console.time()我的代码得出了这个结论.

这是代码(大量剥离)

fileSystem.root.getFile(id, {}, function(fileEntry) {
    fileEntry.file(function(audioTemp) {
        console.time(1);
        console.log(audioTemp.size);
        console.timeEnd(1)
    });
});

这是文件系统API示例.这(显然)需要命名的文件id才能使用它.下面是D&D文件输入代码

function onChangeAddSongsInput() {
    var files = document.getElementById('addSongsInput').files;
    for(var i=0; i<files.length; i++) {
        console.time(1);
        console.log(files[i].size);
        console.timeEnd(1)
    }
}

编辑

我是AMD的核心两个双核,2.7 GHz,2 GB的ram,win7 x64.我相信的规格实际上还算不错.因此,如果某些东西在我的机器上需要足够长的时间,我将把它视为禁忌.

这是我的应用程序中的主要错误修复的阻止程序.我真的很想包括这个很长一段时间的修复程序.我不能设置赏金(但)也许在设置赏金之前有最短的时间.

编辑

我做了一些测试,事实证明,它需要很长时间,因为chrome 计算 的大小而不是从一些元数据中读取它.这是测试结果.

文件越大,所需的时间越长,如果第二次调用则使用一些缓存并且不加载文件.所以现在..我怎么能减少这个时间？大小是我的应用程序中的一个重要信息,但可能不足以使用户的上传速度降低大约1.5秒的每个文件!我正计划导入库,当添加100首左右的歌曲时,这将有助于减少这段时间.这一次将成为应用响应时间的重大突破.