如何上传文件(pdf & doc)并在查看页面中显示/读取

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('file', file);
  
  // 使用AJAX或其他方式将文件上传到服务器
  // 这里只是一个简单的示例，具体实现取决于后端技术和服务器环境
  // 可以使用XMLHttpRequest对象或第三方库如axios进行文件上传
  
  // 示例代码：
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.log('文件上传失败');
    }
  };
  xhr.send(formData);
}

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // 处理上传的文件
  // 可以将文件保存到服务器本地或上传到云存储服务
  
  // 示例代码：
  const file = req.file;
  console.log('文件名:', file.originalname);
  console.log('文件大小:', file.size);
  
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

<div id="fileViewer"></div>

<script>
function readFile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var fileContent = e.target.result;
    
    // 根据文件类型进行相应的处理
    if (file.type === 'application/pdf') {
      // 在页面中显示PDF文件
      var embed = document.createElement('embed');
      embed.src = fileContent;
      embed.width = '100%';
      embed.height = '600px';
      document.getElementById('fileViewer').appendChild(embed);
    } else if (file.type === 'application/msword') {
      // 在页面中显示Word文档
      // 可以使用第三方库如mammoth.js来解析和显示Word文档
      // 这里只是一个简单的示例
      var iframe = document.createElement('iframe');
      iframe.src = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(fileContent);
      iframe.width = '100%';
      iframe.height = '600px';
      document.getElementById('fileViewer').appendChild(iframe);
    } else {
      // 其他文件类型的处理
      console.log('不支持的文件类型');
    }
  };
  reader.readAsDataURL(file);
}

// 在文件选择框中选择文件后触发
document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  readFile(file);
});
</script>