使用 javascript 从文件上传表单访问文件名
[英]Accessing file names from a file upload form using javascript
问题描述
In the code below, how do I get the name of the file selected in the form so I can use the FileAPI to check it for size etc. There'll only be a single file, and a md5 key.
在下面的代码中，我如何获取表单中选择的文件的名称，以便我可以使用 FileAPI 检查它的大小等。只有一个文件和一个 md5 密钥。 I keep ending up with undefined in the script.我一直在脚本中以 undefined 结束。 I was following this example on MDN.我在 MDN 上关注了这个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Upload File Test</title>
</head>
<body>
<form id="uploadForm">
<input type="file">
<input type="hidden" name="handle" value="cb98a10429c5dabeb1a2b491a1a90b0a">
</form>
<button id="upload"><span>Upload</span></button>
</body>
<script type="text/javascript" src="upload.js"></script>
</html>
Javascript Javascript
(function(){
checkFile = function() {
console.log('Performing checks');
formElements = document.getElementById('uploadForm');
console.log(formElements);
var files = formElements.files;
console.log(files); //gives me undefined
}
document.getElementById('upload').addEventListener('click',checkFile);
})();
2 个解决方案
解决方案1
0 2020-08-25 13:20:55
files属性属于<input>元素，而不是<form>元素。
解决方案2
0 2020-08-25 13:29:59
The id needs to be on the input field. id 需要在输入字段上。
First in the javascript file change it to this:首先在 javascript 文件中将其更改为：
(function(){
checkFile = function() {
console.log('Performing checks');
let formElements = document.getElementById('uploadForm');
const fileName = formElements.value.split("\\").pop();
console.log(fileName);
var files = formElements.files;
console.log(files); //gives me undefined
}
document.getElementById('upload').addEventListener('click',checkFile);
})();
And you html to:你 html 到：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Upload File Test</title>
</head>
<body>
<form>
<input id="uploadForm" type="file">
<input type="hidden" name="handle">
</form>
<button id="upload"><span>Upload</span></button>
</body>
<script type="text/javascript" src="upload.js"></script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.