js实现word上传

2026-03-01 15:03:27JavaScript

使用input元素实现文件选择

在HTML中创建一个<input type="file">元素，设置accept属性限制为.doc,.docx格式：

<input type="file" id="wordUpload" accept=".doc,.docx" />

监听文件选择事件

通过JavaScript监听change事件获取用户选择的Word文件：

document.getElementById('wordUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    console.log('Selected file:', file.name, file.type, file.size);
});

使用FileReader读取文件内容

将Word文件读取为ArrayBuffer或二进制字符串：

const reader = new FileReader();
reader.onload = function(e) {
    const arrayBuffer = e.target.result;
    // 处理文件内容
};
reader.readAsArrayBuffer(file);

使用第三方库解析Word文档

安装docx或mammoth等库进行文档解析：

npm install docx

使用docx库解析.docx文件：

import { Document } from 'docx';
const docx = require('docx');

reader.onload = async function(e) {
    const arrayBuffer = e.target.result;
    const doc = await Document.load(arrayBuffer);
    console.log(doc.paragraphs);
};

实现文件上传到服务器

使用FormData对象和fetch API上传文件：

const formData = new FormData();
formData.append('wordFile', file);

fetch('/upload', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Upload error:', error));

添加拖放上传功能

实现拖放区域和事件处理：

<div id="dropZone">拖放Word文件到这里</div>

const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('dragover');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    // 处理拖放的文件
});

显示上传进度

使用XMLHttpRequest显示上传进度：

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`Upload progress: ${percent}%`);
};
xhr.open('POST', '/upload', true);
xhr.send(formData);

客户端验证

在上传前验证文件类型和大小：

js实现word上传

if (!file.name.match(/\.(doc|docx)$/i)) {
    alert('请上传Word文档');
    return;
}

if (file.size > 10 * 1024 * 1024) { // 10MB限制
    alert('文件大小超过限制');
    return;
}