event.target和getelementbyid之间的差异

Difference between event.target and getelementbyid

本文关键字：之间 getelementbyid target event      更新时间：2023-09-26

我正在使用File API，我想知道event.target.files[0]和getElementbyId("demo").files[0] 之间是否有区别

后者似乎奏效了。上下文可能会有所帮助，下面的代码使用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>

谢谢！

evt.target.files[0]和document.getElementById('file').files[0]是handleFileSelect处理程序中完全相同的对象。

问题是您使用FileReader不正确。readAsArrayBuffer仅开始读取缓冲区。

readAsArrayBuffer方法用于开始读取指定的Blob或文件。当读取操作完成时readyState变为DONE，并触发loadend。在那个时候，result属性包含一个ArrayBuffer，表示文件的数据

您需要附加事件处理程序onload和/或onerror才能获得一些结果。看看下面：

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>

注意，ArrayBuffer提供了byteLength属性。

readAsArrayBuffer不返回值，您需要监听Reader的事件。

MDN FileReader.readAsArrayBuffer:

当读取操作完成时，readyState变为DONE，并且loadend被触发。此时，result属性包含一个表示文件数据的ArrayBuffer。

var reader = new FileReader();
reader.onloadend = function(e) {
   var arrayBuffer = reader.result;
}
reader.readAsArrayBuffer(file);

并且ArrayBuffer的大小不是length而是byteLength。

相关文章：