|
|
相关文章推荐
|
爱看球的哑铃 · 跨平台手機服務開發 jQuery Mobile· 7 月前 · |
|
|
聪明伶俐的肉夹馍 · OpenSeadragon ...· 8 月前 · |
|
|
腹黑的铁板烧 · JavaScript ...· 1 年前 · |
|
|
英俊的汤圆 · 使用 sql：max-depth ...· 1 年前 · |
|
|
欢快的领带 · Winscp使用密钥登录 - ...· 1 年前 · |
我正在使用 FileReader API读取多个文件。
<html> <body>
<input type="file" id="filesx" name="filesx[]"
onchange="readmultifiles(this.files)" multiple=""/>
<div id="bag"><ul/></div>
<script>
window.onload = function() {
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
function readmultifiles(files) {
var ul = document.querySelector("#bag>ul");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
function setup_reader(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result; //get file content
// do sth with text
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
reader.readAsBinaryString(file);
for (var i = 0; i < files.length; i++) { setup_reader(files[i]); }
</script> </body> </html>问题是所有文件都是同时读取的，当文件的总大小(sum)非常大时，浏览器就会崩溃。
我想一个接一个地读取文件，这样就减少了内存消耗。
这个是可能的吗？
9 个回答
高票数
最新
Cerbrus
修改于2012-12-20 23:18
得票数
17
这将逐个读取文件：
function readmultifiles(files) {
var ul = document.querySelector("#bag>ul");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
// Read first file
setup_reader(files, 0);
// Don't define functions in functions in functions, when possible.
function setup_reader(files, i) {
var file = files[i];
var name = file.name;
var reader = new FileReader();
reader.onload = function(e){
readerLoaded(e, files, i, name);
reader.readAsBinaryString(file);
// After reading, read the next file.
function readerLoaded(e, files, i, name) {
// get file content
var bin = e.target.result;
// do sth with text
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
// If there's a file left to load
if (i < files.length - 1) {
// Load the next file
setup_reader(files, i+1);
}
Munawir
修改于2017-08-07 21:25
得票数
25
我自己想出了一个有效的解决方案。
function readmultifiles(files) {
var reader = new FileReader();
function readFile(index) {
if( index >= files.length ) return;
var file = files[index];
reader.onload = function(e) {
// get file content
var bin = e.target.result;
// do sth with bin
readFile(index+1)
reader.readAsBinaryString(file);
readFile(0);
}
Oreo
修改于2017-11-16 01:24
得票数
14
我更新这个问题是为了让新用户受益，他们正在寻找通过 the FileReader API 上传多个文件的解决方案，特别是使用ES。
与手动迭代每个文件相比，使用
Object.keys(files)
in ES
要简单得多
<input type="file" onChange="readmultifiles" multiple/>
<script>
function readmultifiles(e) {
const files = e.currentTarget.files;
Object.keys(files).forEach(i => {
const file = files[i];
const reader = new FileReader();
reader.onload = (e) => {
//server call for uploading or reading the files one-by-one
//by using 'reader.result' or 'file'
reader.readAsBinaryString(file);
</script>
Nagnath Mungade
回答于2019-08-13 21:10
得票数
3
我的完整解决方案在这里：
<html> <body>
<input type="file" id="filesx" name="filesx[]"
onchange="readmultifiles(this.files)" multiple=""/>
<div id="bag"></div>
<script>
window.onload = function() {
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
function readmultifiles(files) {
var reader = new FileReader();
function readFile(index) {
if( index >= files.length ) return;
var file = files[index];
reader.onload = function(e) {
// get file content
var bin = e.target.result;
// do sth with bin
readFile(index+1)
reader.readAsBinaryString(file);
readFile(0);
function setup_reader(file) {
var name = file.name;
var reader = new FileReader();
var ul = document.createElement("ul");
document.getElementById('bag').appendChild(ul);
reader.onload = function(e) {
var bin = e.target.result; //get file content
// do sth with text
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
reader.readAsBinaryString(file);
for (var i = 0; i < files.length; i++) { setup_reader(files[i]); }
</script> </body> </html>
De Bonheur
回答于2020-01-19 08:06
得票数
1
您必须为要读取的每个文件实例化一个FileReader。
function readFiles(event) {
//Get the files
var files = event.input.files || [];
if (files.length) {
for (let index = 0; index < files.length; index++) {
//instantiate a FileReader for the current file to read
var reader = new FileReader();
reader.onload = function() {
var result = reader.result;
console.log(result); //File data
reader.readAsDataURL(files[index]);
}
Leon
修改于2020-06-29 01:54
得票数
0
将这些答案中最好的部分。
<input type="file" onchange="readmultifiles(this.files)" multiple />
<script>
function readmultifiles(files) {
for (file of files) {
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.fileName = file.name;
reader.onload = (event) => {
const fileName = event.target.fileName;
const content = event.currentTarget.result;
console.log({ fileName, content });
</script>
Tudor Merlas
修改于2021-04-09 16:25
得票数
2
我使用现代JS (Map，Iterator)实现了另一个解决方案。我改编了我的Angular应用程序的代码(最初是用一些TS特性编写的)。
正如Steve KACOU提到的，我们为每个文件创建不同的FileReader实例。
<input type="file" id="filesx" name="filesx[]"
onchange="processFileChange(this)" multiple=""/> function processFileChange(event) {
if (event.target.files && event.target.files.length) {
const fileMap = new Map();
for (let i = 0; i < event.target.files.length; i++) {
const file = event.target.files[i];
const fileReader = new FileReader();
fileMap.set(fileReader, file);
const mapEntries = fileMap.entries();
readFile(mapEntries);
function readFile(mapEntries) {
const nextValue = mapEntries.next();
if (nextValue.done === true) {
return;
const [fileReader, file] = nextValue.value;
fileReader.readAsDataURL(file);
fileReader.onload = () => {
// Do black magic for each file here (using fileReader.result)
// Read the next file
readFile(mapEntries);
}基本上，这利用了通过引用传递对象的优势，以使映射在每次迭代中保持不变。在我看来，这使得代码非常容易阅读。
Erik Martín Jordán
回答于2021-04-28 16:18
得票数
1
使用
multiple
属性定义输入：
<input onchange = 'upload(event)' type = 'file' multiple/>定义upload函数：
const upload = async (event) => {
// Convert the FileList into an array and iterate
let files = Array.from(event.target.files).map(file => {
// Define a new file reader
let reader = new FileReader();
// Create a new promise
return new Promise(resolve => {
// Resolve the promise after reading file
reader.onload = () => resolve(reader.result);
// Read the file as a text
reader.readAsText(file);
// At this point you'll have an array of results
let res = await Promise.all(files);
}
推荐文章
|
|
爱看球的哑铃 · 跨平台手機服務開發 jQuery Mobile 7 月前 |