HTML5 File API - 切片与否？答案

【问题标题】：HTML5 File API - slicing or not?HTML5 File API - 切片与否？
【发布时间】：2011-09-29 08:51:51
【问题描述】：

HTML5 Rocks 有一些关于文件上传的好例子，但有些地方对我来说还不够清楚。

据我所知，关于file slicing 的示例代码是从文件中获取特定部分然后读取它。正如注释所说，这在我们处理大文件时很有帮助。

关于monitoring uploads 的示例还指出，这在我们上传大文件时很有用。

不切片文件我安全吗？我的意思是服务器端问题、内存等。Chrome 目前不支持File.slice()，如果可能的话我不想使用臃肿的 jQuery 插件。

【问题讨论】：

【解决方案1】：

Chrome 和 FF 都支持 File.slice()，但前段时间 its semantics changed 时，它的前缀为 File.webkitSlice() File.mozSlice()。还有另一个使用它here 读取 .zip 文件的一部分的示例。新的语义是：

Blob.webkitSlice( 
  in long long start, 
  in long long end, 
  in DOMString contentType 
);

不切片你安全吗？当然，但请记住您正在将文件读入内存。 HTML5Rocks 教程提供了分块上传作为潜在的性能改进。借助一些不错的服务器逻辑，您还可以更轻松地从失败的上传中恢复。如果 99% 失败，用户不必重新尝试整个 500MB 文件:)

【讨论】：

然后是 Opera，实现了 .slice()，但有两种不同的方式，一种遵循 w3c，另一种没有 =/
MDN says，从 Firefox 13 和 Chrome 21 开始，slice() 不再是前缀。
在大多数浏览器的较新版本中，您可以使用不带前缀的方法。
HTml Slice 是否先将文件加载到内存中，然后再加载 Slices？实际上我正在研究 resumable.js，如果是大文件，它会花费大量时间进行切片，所以想知道这是在客户端内存中吗？

【解决方案2】：

这是对文件进行切片以作为 blob 传递的方式：

function readBlob() {
    var files = document.getElementById('files').files;
    var file = files[0];
    var ONEMEGABYTE = 1048576;
    var start = 0;
    var stop = ONEMEGABYTE;

    var remainder = file.size % ONEMEGABYTE;
    var blkcount = Math.floor(file.size / ONEMEGABYTE);
    if (remainder != 0) blkcount = blkcount + 1;

    for (var i = 0; i < blkcount; i++) {

        var reader = new FileReader();
        if (i == (blkcount - 1) && remainder != 0) {
            stop = start + remainder;
        }
        if (i == blkcount) {
            stop = start;
        }

        //Slicing the file 
        var blob = file.webkitSlice(start, stop);
        reader.readAsBinaryString(blob);
        start = stop;
        stop = stop + ONEMEGABYTE;

    } //End of loop

} //End of readblob

【讨论】：

FileReader.readAsBinaryString() 已弃用。它不再在W3C File API工作草案中：// async read methodsvoid readAsArrayBuffer(Blob blob);void readAsText(Blob blob, optional DOMString label);void readAsDataURL(Blob blob);