javascript - FileReader output saved to Array - Stack Overflow

admin管理员组

文章数量:1023187

I would like to ask you, if it is possible to iterate through list of file inputs and save the results in one array. Here is bit of my code. Also I use AngularJS if it helps...

HTML

        <input type="file" id="file1">
        <input type="file" id="file2">
        <button id="saveBtn">Save</button>

JAVASCRIPT

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length(); i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like to store results
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
for(var i=0; i < inputs.length(); i++) {
   console.log(results[i]);
 }
}

When I run this code, as result I get 'undefined'. Do you guys have any ideas how to achieve this? Thank you

I would like to ask you, if it is possible to iterate through list of file inputs and save the results in one array. Here is bit of my code. Also I use AngularJS if it helps...

HTML

        <input type="file" id="file1">
        <input type="file" id="file2">
        <button id="saveBtn">Save</button>

JAVASCRIPT

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length(); i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like to store results
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
for(var i=0; i < inputs.length(); i++) {
   console.log(results[i]);
 }
}

When I run this code, as result I get 'undefined'. Do you guys have any ideas how to achieve this? Thank you

• javascript
• arrays
• angularjs
• filereader

Share Improve this question Follow edited Jul 1, 2016 at 13:04 xmigas asked Jul 1, 2016 at 11:50 xmigasxmigas 13166 silver badges2020 bronze badges 4

• would you provide jsfiddle for this... – Parag Bhayani Commented Jul 1, 2016 at 12:00
• Maybe your for loop is executed before the readFile function is executed? If not, you could use FR.error to debug if there is some trouble reading the files. – Mario Santini Commented Jul 1, 2016 at 12:40
• when is readFile function called ? – Walle Cyril Commented Jul 1, 2016 at 12:46
• No that is not the problem. In code a have an event where I call the readFile() and than I make a loop. But I wanted to make it short here so I skipped it – xmigas Commented Jul 1, 2016 at 12:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Besides the point that Niek Vandael makes in his answer; the fact that you are trying to show information before it has pleted loading, there are a few other issues with your code.

input.lengths() 

should be

input.lengths

lengths it's not a method. That causes an error when I test the code (in Chrome).

You also read the same data over and over;

FR.readAsDataURL(inputs[0].files[0]);

should probably be

FR.readAsDataURL(inputs[i].files[0]);

So, here's another take on it. I added a couple of vars to keep track of items loaded and how many there are to load, then call the function to display the data once it has been loaded.

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

//here I would like to write down all results
var btn = document.getElementById('saveBtn');
var inputCount;
var filesLoaded = 0;

function readFile() {
    inputCount = Number(inputs.length);
    for (var i = 0; i < inputCount ; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results.push(event.target.result); //array where I would like to store results
                filesLoaded++;
                if (filesLoaded == inputCount) {
                    showResult();
                }
            };
            FR.readAsDataURL(inputs[i].files[0]);
        }
    }
}

btn.onclick = function () {
    readFile();
}

function showResult() {
    for (var i = 0; i < inputs.length ; i++) {
        console.log(results[i]);
    }
}

There are a few more things to think about, such as validating that files have been selected etc, but I guess it's kind of out of the scope here.

onLoad gets executed when the FileReader has loaded, so after you write your log statements.

Try this: https://jsfiddle/s17Lmc21/1/

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'),     document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like     to store results
                console.log(results[i]);
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
}

I would like to ask you, if it is possible to iterate through list of file inputs and save the results in one array. Here is bit of my code. Also I use AngularJS if it helps...

HTML

        <input type="file" id="file1">
        <input type="file" id="file2">
        <button id="saveBtn">Save</button>

JAVASCRIPT

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length(); i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like to store results
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
for(var i=0; i < inputs.length(); i++) {
   console.log(results[i]);
 }
}

When I run this code, as result I get 'undefined'. Do you guys have any ideas how to achieve this? Thank you

I would like to ask you, if it is possible to iterate through list of file inputs and save the results in one array. Here is bit of my code. Also I use AngularJS if it helps...

HTML

        <input type="file" id="file1">
        <input type="file" id="file2">
        <button id="saveBtn">Save</button>

JAVASCRIPT

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length(); i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like to store results
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
for(var i=0; i < inputs.length(); i++) {
   console.log(results[i]);
 }
}

When I run this code, as result I get 'undefined'. Do you guys have any ideas how to achieve this? Thank you

• javascript
• arrays
• angularjs
• filereader

Share Improve this question Follow edited Jul 1, 2016 at 13:04 xmigas asked Jul 1, 2016 at 11:50 xmigasxmigas 13166 silver badges2020 bronze badges 4

• would you provide jsfiddle for this... – Parag Bhayani Commented Jul 1, 2016 at 12:00
• Maybe your for loop is executed before the readFile function is executed? If not, you could use FR.error to debug if there is some trouble reading the files. – Mario Santini Commented Jul 1, 2016 at 12:40
• when is readFile function called ? – Walle Cyril Commented Jul 1, 2016 at 12:46
• No that is not the problem. In code a have an event where I call the readFile() and than I make a loop. But I wanted to make it short here so I skipped it – xmigas Commented Jul 1, 2016 at 12:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Besides the point that Niek Vandael makes in his answer; the fact that you are trying to show information before it has pleted loading, there are a few other issues with your code.

input.lengths() 

should be

input.lengths

lengths it's not a method. That causes an error when I test the code (in Chrome).

You also read the same data over and over;

FR.readAsDataURL(inputs[0].files[0]);

should probably be

FR.readAsDataURL(inputs[i].files[0]);

So, here's another take on it. I added a couple of vars to keep track of items loaded and how many there are to load, then call the function to display the data once it has been loaded.

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

//here I would like to write down all results
var btn = document.getElementById('saveBtn');
var inputCount;
var filesLoaded = 0;

function readFile() {
    inputCount = Number(inputs.length);
    for (var i = 0; i < inputCount ; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results.push(event.target.result); //array where I would like to store results
                filesLoaded++;
                if (filesLoaded == inputCount) {
                    showResult();
                }
            };
            FR.readAsDataURL(inputs[i].files[0]);
        }
    }
}

btn.onclick = function () {
    readFile();
}

function showResult() {
    for (var i = 0; i < inputs.length ; i++) {
        console.log(results[i]);
    }
}

There are a few more things to think about, such as validating that files have been selected etc, but I guess it's kind of out of the scope here.

onLoad gets executed when the FileReader has loaded, so after you write your log statements.

Try this: https://jsfiddle/s17Lmc21/1/

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'),     document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like     to store results
                console.log(results[i]);
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
}

本文标签： javascriptFileReader output saved to ArrayStack Overflow