将客户端生成的数据保存为JavaScript中的文件

时间:2013-10-10 05:14:09

标签: javascript html5 flash firefox webrtc

我正在使用webRTC开发FileShare应用程序。我想用JavaScript / HTML实现客户端。代码应该在客户端浏览器上运行。 我需要在通过webRTC下载时保存它们。文件可能非常大,我无法完全卸载它们并将它们保存在数组或blob中,然后将它们作为文件保存到磁盘。

是否有任何API允许我在收到文件时将文件保存在块中?

到目前为止,我已找到DownloadifyFileSave.jshtml5 FileWriterApi。 虽然前两个没有分块并且要求我在保存之前首先将完整文件下载到内存,但FileWriterAPI在大多数浏览器上都不可用。

2 个答案:

答案 0 :(得分:11)

正如@ jordan-grey建议的那样,保存blob中的块并将它们连接到更大的blob可能是一个解决方案:

  • 不需要持久化块(即关闭浏览器将删除所有块)
  • 该文件仅由用户保存到自己的文件系统中。除非用户再次访问了已保存的文件,否则Web应用程序在关闭后将无法访问该文件。
  • 可能,如果文件大小不是太大(你必须进行基准测试才能找到它)。对于总量为1GB的块,Chrome对我来说表现相当不错。

我创建了simple test for using blobs as chunks。您可以使用不同的大小和块数参数:

var chunkSize = 500000;
var totalChunks = 200;
var currentChunk = 0;
var mime = 'application/octet-binary';
var waitBetweenChunks = 50;

var finalBlob = null;
var chunkBlobs =[];

function addChunk() {
    var typedArray = new Int8Array(chunkSize);
    chunkBlobs[currentChunk] = new Blob([typedArray], {type: mime});
    console.log('added chunk', currentChunk);
    currentChunk++;
    if (currentChunk == totalChunks) {
        console.log('all chunks completed');
        finalBlob = new Blob(chunkBlobs, {type: mime});
        document.getElementById('completedFileLink').href = URL.createObjectURL(finalBlob);
    } else {
        window.setTimeout(addChunk, waitBetweenChunks);
    }
}
addChunk();

如果你确实需要持久性,W3C File System API应该支持你需要的东西。您可以使用它将块写入单独的文件,然后在完成所有块后,您可以将它们全部读取并将它们附加到单个文件中,然后删除块。

请注意,它的工作原理是为您的应用程序分配沙盒文件系统(对于给定的配额),并且只能访问该应用程序的文件。如果文件是在Web应用程序之外使用的,那么您可能需要使用该函数将文件从应用程序文件系统保存到他的" normal"文件系统。您可以使用createObjectURL()方法执行此类操作。

您对浏览器支持的当前状态是正确的。 A Filesystem API polyfill可用,它基于IndexedDB(更广泛支持)作为文件系统仿真后端。我没有在大文件上测试polyfill。您可能会遇到大小限制或性能限制。

答案 1 :(得分:3)

您检查过https://github.com/Peer5/Sharefest了吗?它应该涵盖您的要求