拖放大文件时选项卡崩溃

Question

我已经设置了一个简单的拖放文件选择器。要将删除的文件传递给服务器，我将获取其数据URL并将其放入输入字段。这适用于足够小的文件。当你删除一个大文件（在我的测试中大于300mb）时，文件名，但不会读取内容，或者（Chrome）标签甚至可能完全崩溃（！）。为什么是这样？我该如何解决这个问题（最好没有XMLHttpRequest2）。

＆＃13;

＆＃13;

function processFile(file) {
	var name = file.name, reader = new FileReader();
	$("form input[name=filename]").val("Processing...");
	reader.onload = function(blob) {
		$("form input[name=blob]").attr("value", blob.target.result);
		$("form input[name=filename]").val(name);
	}
	reader.readAsDataURL(file);
}
$(document).on("dragenter", function(e) {
	e.preventDefault();
}).on("dragover", function(e) {
	e.preventDefault();
	e.originalEvent.dataTransfer.dropEffect = "copy";
}).on("drop", function(e) {
	e.preventDefault();
	var files = (e.dataTransfer || e.originalEvent.dataTransfer).files;
	if (files && files.length > 0) {
		var file = files[0];
		processFile(file);
	}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
	<input type="text" name="blob" />
	<input type="text" name="filename" />
</form>
Drag file here

＆＃13;

＆＃13;

＆＃13;