I am working with the File API and I was wondering if there's a difference between event.target.files[0] and getElementbyId("demo").files[0]
The latter seems to work. Context may help, the code below uses the instance of event.target.files[0]:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
</head>
<body>
<input type="file" id="file" name="file"/>
<output id="list"></output>
<p id="demo"></p>
<script>
function handleFileSelect(evt) {
// grab the file that was uploaded which is type File.
// evt is the event that was triggered
// evt.target returns the element that triggered the event
// evt.target.files[0] returns the file that was uploaded, type File
var file = evt.target.files[0];
//file is not of TYPE BLOB!!!
// instantiate a FileReader object to read/save the file that was uploaded
var reader = new FileReader();
// read the file and save as an array
arrayoffile=reader.readAsArrayBuffer(file);
document.getElementById("demo").innerHTML = arrayoffile.length;
window.alert("hello");
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
Thanks!
I am working with the File API and I was wondering if there's a difference between event.target.files[0] and getElementbyId("demo").files[0]
The latter seems to work. Context may help, the code below uses the instance of event.target.files[0]:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
</head>
<body>
<input type="file" id="file" name="file"/>
<output id="list"></output>
<p id="demo"></p>
<script>
function handleFileSelect(evt) {
// grab the file that was uploaded which is type File.
// evt is the event that was triggered
// evt.target returns the element that triggered the event
// evt.target.files[0] returns the file that was uploaded, type File
var file = evt.target.files[0];
//file is not of TYPE BLOB!!!
// instantiate a FileReader object to read/save the file that was uploaded
var reader = new FileReader();
// read the file and save as an array
arrayoffile=reader.readAsArrayBuffer(file);
document.getElementById("demo").innerHTML = arrayoffile.length;
window.alert("hello");
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
Thanks!
Share edited Mar 5, 2017 at 15:19 kgui asked Jan 5, 2016 at 5:48 kguikgui 4,1635 gold badges44 silver badges55 bronze badges 5- 1 can you share a fiddle? – gurvinder372 Commented Jan 5, 2016 at 5:49
- if it works, there's no difference: JS provides lots of ways to reach interesting elements. – dandavis Commented Jan 5, 2016 at 5:51
- @gurvinder372 I attached an example that shows the former function not working. – kgui Commented Jan 5, 2016 at 5:51
- @dandavis the former does not work – kgui Commented Jan 5, 2016 at 5:52
-
1
I doubt the later works.
pelements don't have afilesproperty. Did you meangetElementbyId("file").files[0]? – Felix Kling Commented Jan 5, 2016 at 6:00
2 Answers
Reset to default 3The evt.target.files[0] and document.getElementById('file').files[0] are the very same objects in the handleFileSelect handler.
The problem is that you're using FileReader incorrectly. The readAsArrayBuffer only starts reading the buffer.
The readAsArrayBuffer method is used to start reading the contents of a specified Blob or File. When the read operation is finished, the readyState bees DONE, and the loadend is triggered. At that time, the result attribute contains an ArrayBuffer representing the file's data.
You need to attach event handlers onload and/or onerror to get some results. Take a look below:
function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var arrayBuffer = event.target.result;
document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
};
reader.readAsArrayBuffer(file);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);<input type="file" id="file" name="file" />
<output id="list"></output>
<p id="demo"></p>Note that ArrayBuffer offers byteLength property.
readAsArrayBuffer does not return a value, you need to listen to the event of the Reader.
MDN FileReader.readAsArrayBuffer:
When the read operation is finished, the
readyStatebeesDONE, and theloadendis triggered. At that time, theresultattribute contains an ArrayBuffer representing the file's data.
var reader = new FileReader();
reader.onloadend = function(e) {
var arrayBuffer = reader.result;
}
reader.readAsArrayBuffer(file);
And the size of an ArrayBuffer is not length but byteLength.