例によって jQuery でやっているがイベントのバインド部分と途中経過の表示部分のみ。

fileReader に素直なループで読み込ませると fileReader.result がどんどん上書きされてしまうのでウェイトを入れている。ただ、 fileReader を複数 new すればこんなことしなくてもいい気はする。さらに、今は Blog.text() なるメソッドを使う方がベターっぽい。

const fileReader = new FileReader();
fileReader.onload = (e) => {
	$('#result').val(`${$('#result').val()}\n${fileReader.result}\n------------------------------`);
};
$('#base').on('drop', (e) => {
	e.preventDefault();
	const files = e.originalEvent.dataTransfer.files;
	const recursiveRead = (array, cursor) => {
		if(array.length > cursor) {
			$('#base').text(`読み込み中…… ${cursor + 1} / ${array.length}`);
			fileReader.readAsText(array[cursor]);
			setTimeout(()=>{recursiveRead(array, cursor + 1);}, 500);
		} else {
			$('#base').text(`おしまい！`);
		}
	};
	recursiveRead(files, 0);
});