Javascript:拖放图像上载：打印错误消息

我正在学习使用著名的教程创建图像上传功能：

我一步一步地仔细阅读教程，直到创建拖放函数，拖放事件触发handleFiles函数，控制台日志打印错误“无法读取未定义的属性‘length’”为止，它一直工作得非常完美。我哪里做错了

代码如下：

<!-- tutorial source: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications -->
<!-- jquery library -->
<script type="text/javascript" src="/script/googleapis.js"></script>

<!-- css file -->
<link rel="stylesheet" type="text/css" href="testcss.css">

<!-- display input file -->
<input type="file" accept="image/*" multiple id="inputElem" >

<!-- accessing selected file -->
<script>
    // Note: the selectFile can only be access AFTER a event triggered (e.g. onchange)
    var selectedFile = $('#inputElem')[0].files[0];
</script>

<!-- Adding a onchange envent listener to input file -->
<script>
    // Find the input file element
var inputElement = document.getElementById("inputElem");
    // Attach change listener to the element, with a callback function named handlefiles
inputElement.addEventListener("change", handleFiles, false);
    // declare the handleFiles function
function handleFiles() {
    // when the change event triggered, get the value of the file input
  var fileList = this.files;
    // test
  console.log(fileList);

    // Getting information about selected files 
  var numFiles=fileList.length;
    // test the variable numFile if it has value
  console.log(numFiles);
    // test iterating names
  for (var i = 0, numFiles = fileList.length; i < numFiles; i++) {
  var fileName = fileList[i].name;
  console.log(fileName);
  }
}
</script>

<!-- Create a handmade select file button, the button clicked will yield the same result of clicking the native select filed -->
<!-- display the button -->
<div id="fileSelect">Upload Images</div>
<script>
// find fileSelect (button) and fileElem (input files)
var fileSelect=document.getElementById("fileSelect");
var fileElem=document.getElementById("inputElem");
fileSelect.addEventListener("click",function(){
    if(fileElem){
        fileElem.click();
    }

},false);
</script>


<!-- slecting files using drag and drop -->
<!-- display the contenteditable div -->
<div id="topic_content_input" contenteditable="true" autocomplete="off" spellcheck="false" data-placeholder="dropbox " ></div>
<script>
var dropbox;
// find dropbox element
dropbox = document.getElementById("topic_content_input");
// attach event listener to dropbox
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
// define the callback function
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}
</script>

---

请将您的功能更改为：

function handleFiles(files) {
    // when the change event triggered, get the value of the file input
  var fileList = files;
    // test
  console.log(fileList);

    // Getting information about selected files 
  var numFiles=fileList.length;
    // test the variable numFile if it has value
  console.log(numFiles);
    // test iterating names
  for (var i = 0, numFiles = fileList.length; i < numFiles; i++) {
  var fileName = fileList[i].name;
  console.log(fileName);
  }

函数句柄文件（文件）{
//触发更改事件时，获取文件输入的值
var fileList=文件；
//试验
console.log（文件列表）；
//获取有关选定文件的信息
var numFiles=fileList.length；
//测试变量numFile是否有值
console.log（numFiles）；
//测试迭代名称
for（var i=0，numFiles=fileList.length；i

非常感谢，但它不适用于删除文件。使用上述代码选择文件时，“上载图像”按钮甚至会打印错误。从我这边看，它适用于删除文件。它显示了文件的长度和名称。

function handleFiles(files) {
    // when the change event triggered, get the value of the file input
  var fileList = files;
    // test
  console.log(fileList);

    // Getting information about selected files 
  var numFiles=fileList.length;
    // test the variable numFile if it has value
  console.log(numFiles);
    // test iterating names
  for (var i = 0, numFiles = fileList.length; i < numFiles; i++) {
  var fileName = fileList[i].name;
  console.log(fileName);
  }