纯js实现,点击选择文件
时间: 2023-05-29 13:03:44 浏览: 124
以下是一个简单的纯JS实现的选择文件的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择文件示例</title>
</head>
<body>
<input type="file" id="file-input">
<button id="file-submit">上传文件</button>
<script>
var fileInput = document.getElementById('file-input');
var fileSubmit = document.getElementById('file-submit');
fileSubmit.addEventListener('click', function() {
var files = fileInput.files;
if (files.length > 0) {
var file = files[0];
console.log('选择的文件名:', file.name);
console.log('选择的文件大小:', file.size);
console.log('选择的文件类型:', file.type);
// 在这里可以将文件发送到服务器,进行上传等操作
}
});
</script>
</body>
</html>
```
在这个示例中,我们使用了`<input type="file">`元素来创建一个选择文件的框,用户可以通过点击框内的按钮或者直接点击框来选择文件。我们还在页面上放置了一个“上传文件”的按钮,当用户点击该按钮时,就会触发一个事件,在事件处理函数中,我们可以通过`fileInput.files`属性获取到用户选择的文件列表,然后可以对每个文件进行处理,例如上传到服务器等。