原生html、js 实现上传.doc .docx 文件并获取上传文件的二进制数据
时间: 2024-10-17 14:15:54 浏览: 35
POI生成doc文档和docx文档相关jar包
在HTML5和JavaScript中,我们可以利用File API来实现在网页上选择和处理用户上传的`.doc`和`.docx`文档。以下是一个简单的示例,展示了如何使用`input[type=file]`元素让用户选择文件,然后读取二进制数据:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Doc</title>
</head>
<body>
<input type="file" id="fileInput" accept=".doc, .docx" multiple>
<button onclick="uploadFiles()">上传</button>
<script>
function uploadFiles() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length > 0) {
for (let i = 0; i < fileInput.files.length; i++) {
const file = fileInput.files[i];
const reader = new FileReader();
reader.onload = function(event) {
// 获取到的是Base64编码的二进制数据
const binaryData = event.target.result;
console.log("Binary data:", binaryData);
};
reader.readAsArrayBuffer(file); // 使用ArrayBuffer读取文件
}
} else {
alert('请选择文件');
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击“上传”按钮时,会触发`uploadFiles`函数。它首先获取用户选择的文件列表,然后对每个文件创建一个`FileReader`实例。`readAsArrayBuffer`方法用于将文件转换为二进制数据,`onload`事件回调里可以获取到这个二进制数据。
阅读全文