Question

我正在使用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>

谢谢！

Answer 1

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属性。

Answer 2

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。

event.target和getelementbyid之间的区别

2 个答案: