HTML5中通过将本地文件全路径，dataTransfer来实现上传

admin · 发表于 2024-9-14 11:57:21

HTML5中通过将本地文件全路径，dataTransfer来实现上传
在 HTML5 中，出于安全原因，浏览器不允许直接通过 JavaScript 设置 `<input type="file"> ` 的值，因此无法直接将本地文件的全路径赋值给文件输入控件。不过，可以使用 ` DataTransfer ` 对象来模拟文件选择。
以下是一个示例，展示如何使用 ` DataTransfer` 对象来实现文件上传的功能。用户仍然需要手动选择文件，但我们可以通过代码模拟文件的添加过程。
### 示例代码

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;
// 这里可以添加文件上传逻辑
});
// 模拟文件添加
function addFilesToInput(filePaths) {
const dataTransfer = new DataTransfer();
filePaths.forEach(filePath => {
const file = new File([""], filePath.split('/').pop(), { type: "text/plain" }); // 创建一个空文件，文件名为路径中的文件名
dataTransfer.items.add(file); // 将文件添加到 DataTransfer 对象中
});
const fileInput = document.getElementById('fileInput');
fileInput.files = dataTransfer.files; // 将 DataTransfer 中的文件赋值给文件输入控件
}
// 示例: 模拟添加文件（在实际应用中，用户需要手动选择文件）
// addFilesToInput(['C:/path/to/file1.txt', 'C:/path/to/file2.txt']); // 取消注释以模拟添加文件
</script>
</body>
</html>

复制代码

### 代码说明
1. **`<input type="file" multiple /> `**：允许用户选择多个文件。
2. **上传按钮事件**：当用户点击上传按钮时，会获取文件输入控件中的文件列表并显示所选文件的名称。
3. **` addFilesToInput ` 函数**：该函数接受一个文件路径数组，并使用 ` DataTransfer` 对象来模拟文件选择。注意，这里创建的文件是空文件，文件名使用路径中的文件名。
4. **模拟文件添加**：在实际应用中，用户需要手动选择文件。示例中提供了一个函数来模拟文件添加，可以取消注释并调用该函数以测试。
### 注意事项
- 由于安全考虑，浏览器不允许直接设置文件输入控件的值，因此只能通过上述间接方式来模拟文件选择。
- 用户仍需手动选择文件，或者在某些情况下（如拖放文件）才能将文件添加到输入控件中。

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

HTML5中通过将本地文件全路径，dataTransfer来实现上传

相关帖子