【发布时间】：2016-02-04 04:16:42
【问题描述】：
我正在尝试使用 kartik@ 的 html5 文件输入功能来上传大量图片。我希望最终用户不必在上传之前调整图像大小，因此我使用 resizeImage 选项@。我在上传大文件（每个 3-4MB）时遇到问题。
我已经修改了 fileinput.js 以用调整大小的 blob 替换预览图像，但是我的浏览器（Chrome 48.0.2564.103 m）仍然在 F12 -> Resources -> ... - 中列出原始（大文件大小） blob > 图像文件夹。当上传数百张图片时，浏览器最终会耗尽内存并崩溃。
我在 fileinput.js 的“self”对象中找不到对原始/大 blob 的任何引用，所以我不知道如何收集这个未使用的 blob 垃圾。
jsfiddle of issue / link to modified fileinput.js（修改：2396-2412）
setTimeout(function(d) {
console.log('attempting to replace original blob with:');
console.log(blob);
console.log(objUrl.createObjectURL(blob));
console.log('attempting to revoke original blob: ' + image.src);
objUrl.revokeObjectURL(image.src);
delete image.src;
self.clearDefaultPreview();
image.src = objUrl.createObjectURL(blob);
console.log('outputting fileinput.js self var:');
console.dir(JSON.stringify(self));
console.dir(self);
}, 500);
}, type, self.resizeQuality);
console.log('current image.src blob is: ' + image.src);
@我没有发布两个以上链接的声誉，因此我在 jsfiddle 的 javascript 框架内嵌入了指向插件文档的链接。
任何帮助将不胜感激。
【问题讨论】：
-
每次调用createObjectURL()都需要调用一次revokeObjectURL()
-
createObjectURL() 只为大 blob 调用一次，上面列出的源中引用“blob”的调用是小 blob
-
所有这些控制台日志都需要大量内存来保存。此外，我一点也不惊讶浏览器选项卡无法在不崩溃的情况下调整数百个数兆字节图像的大小。我们需要查看您的其余代码以获得更多帮助；它在一个循环中？数百张图片从何而来？
-
感谢您的回复。我不确定除了 jsfiddle 中的内容之外，我还可以发布哪些其他来源？无论我是添加一个图像，十个还是一百个 - 内存中剩余的 blob 都存在问题，我认为 revokeObjectURL() 应该清理它。我已经在 chrome 和 firefox 中分析了该示例，并且都报告说大 (3+MB) 的 blob 仍在内存中。
-
日志本身可能会保留对 blob 的引用。删除日志记录。
标签： javascript jquery html garbage-collection