Javascript FileReader doesn't fire events on large files
I am trying to play video files from and on a client computer. The thing is, getting the absolute path is quite difficult, so I can put it in an attribute video
src
or object
data
. Eventually I find a FileReader object and it works fine with small files. However, it does not fire the onload event when reading large files (up to 200MB +). No error, FileReader.onerror fires nothing, try / catch doesn't help. The developer console doesn't show anything.
I think it has something to do with the maximum file size in each browser config, but I can't find a way to tweak it. Help?
Here's the code
function onclick()
{
var file_dialog = document.getElementById("file_dialog");
var path_dialog = document.getElementById("path_dialog");
var video_player = document.getElementById("video_player");
var begin_video = document.getElementById("begin_video");
var reading_progress = document.getElementById("reading_progress");
file_dialog.onchange = function ()
{
begin_video.disabled = file_dialog.files.length == 0 || path_dialog.files.length == 0;
};
path_dialog.onchange = file_dialog.onchange;
begin_video.onclick = function ()
{
begin_video.disabled = true;
var reader = new FileReader();
reader.onload = function (e)
{
video_player.src = e.target.result;
begin_video.disabled = false;
};
reader.onprogress = function (e)
{
reading_progress.textContent = "Reading... " + (Math.floor(e.loaded / e.total * 10000) / 100) + "%";
};
reader.onloadend = function (e)
{
if (e.target.error != null)
reading_progress.textContent = e.target.error.code;
else
reading_progress.textContent = "FINISHED!!!";
};
reader.onerror = alert;
reader.readAsDataURL(file_dialog.files[0]);
var reader2 = new FileReader();
reader2.onload = function (e)
{
};
};
}
source to share
There is no such browser configuration setting for this. I have also worked with FileReader and large files (up to 50MB) and browsers behave very differently:
- Chrome => did well and was the most "responsive"
- Firefox => not as good as Chrome, high memory consumption but worked
- IE => worked for so long that the file was below 15MB, just didn't process the file above the browser - no feedback, no event triggered
Perhaps this is a memory problem - the same files were tested with a different machine with less memory, and IE refused to work with 5MB files already.
source to share