|
|
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` 对象来处理文件上传。
|
|
|免责声明|小黑屋|依星资源网
( 鲁ICP备2021043233号-3 )|网站地图
发表于 2024-9-14 11:42:56
扫码关注微信公众号，及时获取最新资源信息！【