FileReader 似乎消耗了所有内存,因为它被重复用于预加载多个 blob,并且从不释放它。有什么已知的方法可以强制它释放消耗的内存吗?将 FileReader 对象及其结果属性设置为 null 似乎不起作用。
UPDATE:
这里有一个示例代码 http://jsfiddle.net/WK6H6/2/(在大文件(例如电影)上进行测试,否则您不会注意到任务管理器中的效果):
<input id="file" type="file" onchange="sliceMe()" />
<script>
function sliceMe() {
var file = document.getElementById('file').files[0],
fr,
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
chunk = 0;
function loadNext() {
var start, end,
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice;
start = chunk * chunkSize;
end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fr = new FileReader;
fr.onload = function() {
if (++chunk < chunks) {
// shortcut - in production upload happens and then loadNext() is called
loadNext();
}
};
fr.readAsBinaryString(blobSlice.call(file, start, end));
}
loadNext();
}
</script>
我每次都尝试创建新的 FileReader 实例,但问题仍然存在。我怀疑这可能是由图案的圆形性质引起的,但我不确定在这种情况下可以使用什么其他图案。
我在 Firefox 和 Chrome 中检查了这段代码,Chrome 似乎处理得更优雅 - 它在每个周期后清除内存并且速度非常快。但讽刺的是,Chrome 根本不需要使用这段代码。这只是一个克服 Gecko 6- FormData + Blob bug 的实验(Bug 649150 - 如果通过 FormData 发送,Blob 没有文件名 https://bugzilla.mozilla.org/show_bug.cgi?id=649150).
尝试这样代替:
function sliceMe() {
var file = document.getElementById('file').files[0],
fr = new FileReader,
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
chunk = 0;
function loadNext() {
var start, end,
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice;
start = chunk * chunkSize;
end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fr.onload = function() {
if (++chunk < chunks) {
//console.info(chunk);
}
};
fr.onloadend = function(e) {
loadNext(); // shortcut here
};
fr.readAsBinaryString(blobSlice.call(file, start, end));
}
loadNext();
}
onloadend 将使您避免与其他读取重叠...(显然,您可以更好地修复增量,但您明白了...)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)