如果这个input按钮隐藏了,应该如何写
时间: 2024-03-05 15:54:03 浏览: 46
如果 input 按钮被隐藏了,可以使用 JavaScript 中的 click() 方法触发点击事件,从而实现上传文件的功能。以下是示例代码:
HTML 代码:
```html
<input type="file" id="inputFile" style="display: none;">
<button onclick="selectFile()">选择文件</button>
<button onclick="uploadFile()">上传文件</button>
```
JavaScript 代码:
```javascript
function selectFile() {
// 获取 input 元素
const inputFile = document.getElementById('inputFile');
// 触发点击事件
inputFile.click();
}
function uploadFile() {
// 获取 input 元素
const inputFile = document.getElementById('inputFile');
// 获取文件对象
const file = inputFile.files[0];
// 创建 FormData 对象
const formData = new FormData();
// 将文件对象添加到 FormData 中
formData.append('file', file);
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求方式和 URL
xhr.open('POST', '/upload');
// 发送请求
xhr.send(formData);
// 监听请求状态变化事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功
console.log(xhr.responseText);
}
};
}
```
以上代码中,我们将 input 元素的样式设置为 `display: none;`,这样就不会显示出来了。然后我们通过 `selectFile()` 方法触发 input 元素的点击事件,在弹出的文件选择框中选择文件后,再调用 `uploadFile()` 方法来上传文件。