gpt4 book ai didi

javascript - 为什么这只适用于 body 部分而不适用于头部

转载 作者:搜寻专家 更新时间:2023-10-31 22:28:03 24 4
gpt4 key购买 nike

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<input type="file" id="files" multiple />
<label id="list"></label>

<script>
//Interact with local files using the HTML5 file API
function handleFileSelect(evt)
{
//target is the element that triggered the event
var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
for(var i=0; i<files.length; i++)
{
f = files[i];
document.getElementById('list').innerHTML += f.name + ' ' + f.type + ' ' + f.size + ' bytes ' + f.lastModifiedDate + '<br/>';
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>

我只是想知道,如果将脚本部分从主体移到头部,为什么代码无法正常工作。

正确工作的代码应该显示文件名及其大小和其他详细信息,但是当代码被移动时,它不会显示这些。

最佳答案

因为当你把它放在头部时,文件元素还不存在。因此,当您调用 document.getElementById('files') 时,它返回 null,导致 addEventListener 崩溃。

浏览器自上而下构建页面。因此,最常见的是将 JavaScript 放在底部。

或者,您可以挂接到 DOMContentLoaded 事件。这基本上就是 jQuery 的 $(document).ready() 所做的。或者执行 window.onload = function() {...}document.onload = function() {...}

但实际上,将它放在底部更简单。我通常只是这样做。

关于javascript - 为什么这只适用于 body 部分而不适用于头部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28397319/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com