的Javascript：拖放圖片上傳：打印錯誤信息

Question

我學習創建一個圖片上傳功能，與著名的教程在這裏：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

我按照教程仔細一步一步，它可以完美運行，直到點創建一個拖放函數，其中拖放事件觸發handleFiles函數，控制檯日誌打印錯誤「Can not read property'length of undefined」。我哪裏錯了？

下面是代碼：

<!-- 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> 

CSS（testcss.css）

#inputElem{ 
    display:none; 
} 
#fileSelect{ 
    cursor:pointer; 
    width:110px; 
    height:20px; 
    border-radius: 3px; 
    background-color: #ffcc99; 
    text-align: center; 
    padding:3px; 
    color: white; 
} 

#topic_content_input[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before { 
    content: attr(data-placeholder); 
    float: left; 
    margin-left: 2px; 
    color: rgba(134,134,134,0.6); 
} 
/*#adjust{ 
    display:inline-block; 
}*/ 
#topic_content_input{ 
    color:black; 
    background-color:white; 
    margin-top:2px; 
    min-height: 100px; 
    white-space: pre-wrap; 
    display:inline-block; 
    text-align: center; 
    width:521px; 
    /*display inline in safari creates a big I-Beam cursor, howoever, if remove display=inline, prewrap would stop working*/ 

    /*position:relative;*/ 
    /*display:flex;*/ 
    padding: 10px; 
    border: 1px solid orange; 
    border-radius:3px; 
    text-align: left; 
    vertical-align: bottom; 
} 
#topic_content_input:focus{ 
    outline-style:solid; 
    outline-color:orange; 
    outline-width:0px; 
    line-height:normal; 
} 

Answer 1

請改變你的功能之後，

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); 
    }