首页原生html、js 实现上传.doc .docx 文件并获取上传文件的二进制数据

原生html、js 实现上传.doc .docx 文件并获取上传文件的二进制数据

时间: 2024-10-17 08:15:54 浏览: 22

在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`事件回调里可以获取到这个二进制数据。

阅读全文