如何使用JavaScript块读取任何本地文件？ [英] How to read any local file by chunks using JavaScript?
问题描述
如何通过块（2kb或更多）在本地读取任何大文件（大于1千兆字节），然后将块转换为字符串，处理该字符串，然后获取下一个块等等，直到结束该文件？
我只能读取小文件并将其转换为字符串，正如您从代码中看到的，我不知道如何读取文件由大块。如果我用大于10MB的文件尝试它，浏览器会冻结。
< head>
< title>读取档案< / title>
< / head>
< body>
< input type =fileid =myFile>
< hr>
< script>
var input = document.getElementById（myFile）;
var output = document.getElementById（output）;
input.addEventListener（change，function（）{
if（this.files&& this.files [0]）{
var myFile = this.files [0] ;
var reader = new FileReader（）;
reader.addEventListener（'load'，function（e）{
output.textContent = e.target.result;
}） ;
reader.readAsBinaryString（myFile）;
}
}）;
< / script>
< / body>
< / html>
下面是我在StackOverflow上找到的链接和答案，同时研究如何完成它，但它没有't解决了我的问题。
1：这个问题是关于如何使用UniversalXPConnect来做的，只有在Firefox中，这就是为什么我找到答案是无关紧要的，因为我使用Chrome并且不知道UniversalXPConnect是什么。
如何通过块读取本地文件在JavaScript中
2：这个问题只是询问如何阅读文本文件，但我想能够读取任何文件，不仅仅是文本，还有大块，这使得答案在那里无关紧要，但我喜欢答案的代码有多短。 将本地文本文件读入JavaScript数组[b]
3：这也是关于文本文件，并不显示如何读取文件由大块如何读取本地文本文件。
我知道一点Java，你可以轻松地做到这一点;
char [] myBuffer = new char [512];
int bytesRead = 0;
BufferedReader in = new BufferedReader（new FileReader（foo.mp4））; （（bytesRead = in.read（myBuffer，0,512））！= -1）{
...
}
但我是新来的javascript
为了解决这个问题，通过指定从哪里开始切片的属性和结束哪个是块的位置来切分文件，然后我将它放在一个while循环中，这样每个循环块的位置将根据所需的块大小移动，直到文件的结尾。
但是在运行后，我最终得到了文本区域中最后一个块的值，因此要显示所有的二进制字符串i concatenate每次迭代的输出。
< html>
< head>
< title>读取档案< / title>
< / head>
< body>
< input type =fileid =myFile>
< hr>
< script>
var input = document.getElementById（myFile）;
var output = document.getElementById（output）;
var chunk_size = 2048;
var offset = 0;
input.addEventListener（change，function（）{
if（this.files&& this.files [0]）{
var myFile = this.files [0] ;
var size = myFile.size; //获取文件大小，以便我们可以将它用于循环语句
var i = 0;
while（i< size）{
var blob = myFile.slice（offset，offset + chunk_size）; //通过指定索引（块大小）来分割文件
var reader = new FileReader（）;
reader.addEventListener（'load '，函数（e）{
output.textContent + = e.target.result; //在每次迭代中连接输出
}）;
reader.readAsBinaryString（blob）;
offset + = chunk_size; //增加索引位置（chunk）
i + = chunk_size; //跟踪何时退出，通过递增直到达到文件大小（文件结束）
}
}
}）;
< / script>
< / body>
< / html>
How can I read any large file(greater than 1 gigabytes) locally by chunks(2kb or more),and then convert the chunk to a string, process the string and then get the next chunk and so on until the end of the file?
I'm only able to read small files and convert it to string, as you can see from the code I don't know how to read the file by chunks. The browser freezes if I try it with a file greater than 10mb.
<html>
<head>
<title>Read File</title>
</head>
<body>
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
</script>
</body>
</html>
Below are the links and answers I found on StackOverflow whilst researching on how to accomplish it, but it didn't solve my question.
1: This question was asking about how to do it using UniversalXPConnect, and only in Firefox, which is why i found the answer there to be irrelevant, because I use Chrome and don't know what UniversalXPConnect is. How to read a local file by chunks in JavaScript
2: This question was asking about how to read text files only, but I want to be able to read any file not just text, and also by chunks, which makes the answers there irrelevant, but i liked how short the code of the answer was. Reading local text file into a JavaScript array [duplicate]
3: This also is about text files and doesn't show how to read files by chunks How to read a local text file.
I know a little bit of Java, which you can easily do it by;
char[] myBuffer = new char[512];
int bytesRead = 0;
BufferedReader in = new BufferedReader(new FileReader("foo.mp4"));
while ((bytesRead = in.read(myBuffer,0,512)) != -1){
...
}
but I'm new to javascript
I was able to solve it by slicing the file by specifying attributes of where to begin the slice and where to end which will be the chunk, I then enclosed it in a while loop so that for each loop chunk position will shift according to the desired chunk size until the end of the file.
But after running it, I end up getting the last value of the chunk in the text area, so to display all the binary string i concatenate the output on each iteration.
<html>
<head>
<title>Read File</title>
</head>
<body>
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
var chunk_size = 2048;
var offset = 0;
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var size = myFile.size; //getting the file size so that we can use it for loop statement
var i=0;
while( i<size){
var blob = myFile.slice(offset, offset + chunk_size); //slice the file by specifying the index(chunk size)
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent += e.target.result; //concatenate the output on each iteration.
});
reader.readAsBinaryString(blob);
offset += chunk_size; // Increment the index position(chunk)
i += chunk_size; // Keeping track of when to exit, by incrementing till we reach file size(end of file).
}
}
});
</script>
</body>
</html>
这篇关于如何使用JavaScript块读取任何本地文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
