admin管理员组

文章数量:1391987

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!

  • javascript
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. p elements don't have a files property. Did you mean getElementbyId("file").files[0]? – Felix Kling Commented Jan 5, 2016 at 6:00
Add a ment  | 

2 Answers 2

Reset to default 3

The 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 readyState bees DONE, and the loadend is triggered. At that time, the result attribute 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.

本文标签： javascriptDifference between eventtarget and getelementbyidStack Overflow

版权声明：本文标题：javascript - Difference between event.target and getelementbyid - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744652330a2617757.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。