JS输入本地文件全路径，赋值给file，实现多文件上传

admin · 发表于 3 天前

JS输入本地文件全路径，赋值给file，实现多文件上传
在 JavaScript 中，出于安全原因，浏览器不允许直接通过代码设置 `<input type="file">` 的值，因此无法直接将本地文件的全路径赋值给文件输入控件。不过，我们可以通过文件选择对话框让用户选择多个文件，并在选择后处理这些文件。
如果你希望实现多文件上传，用户需要手动选择文件，或者通过拖放文件的方式来实现。以下是一个改进的示例，允许用户选择多个文件，并在选择后显示所选文件的名称。
### 示例代码

html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多文件上传示例</title>
</head>
<body>
<input type="file" id="fileInput" multiple />
<button id="uploadButton">上传文件</button>
<div id="fileList"></div>
<script>
document.getElementById('uploadButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const fileListDiv = document.getElementById('fileList');
fileListDiv.innerHTML = ''; // 清空之前的文件列表
// 获取用户选择的文件
const files = fileInput.files;
if (files.length === 0) {
alert('请先选择文件');
return;
}
// 显示所选文件的名称
const fileNames = Array.from(files).map(file => file.name).join(', ');
fileListDiv.innerHTML = '已选择文件: ' + fileNames;
// 这里可以添加文件上传逻辑
});
</script>
</body>
</html>

复制代码

### 代码说明
1. **`<input type="file" multiple /> `**：通过设置 ` multiple ` 属性，允许用户选择多个文件。
2. **上传按钮事件**：当用户点击上传按钮时，会获取文件输入控件中的文件列表。
3. **文件列表显示**：使用 ` Array.from(files).map(file => file.name).join(', ') ` 将所选文件的名称连接成一个字符串，并显示在页面上。
4. **文件上传逻辑**：在代码中可以添加实际的文件上传逻辑，例如使用 ` XMLHttpRequest ` 或 ` fetch ` API 上传文件到服务器。
### 注意事项
- 用户必须手动选择文件，浏览器出于安全考虑不允许直接设置文件输入控件的值。
- 你可以在上传文件的逻辑中使用 ` FormData` 对象来处理文件上传。

		自动登录	找回密码
密码			立即注册

JS输入本地文件全路径，赋值给file，实现多文件上传

相关帖子