悠悠楠杉
网站页面
使用AJAX实现上传文件
06/20
1. 创建HTML界面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传与Markdown生成</title>
</head>
<body>
<h1>文件上传与Markdown生成</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<button type="button" onclick="uploadFile()">上传文件</button>
</form>
<h2>生成的Markdown:</h2>
<pre id="markdownOutput"></pre>
<script src="script.js"></script>
</body>
</html>
2. 编写JavaScript（AJAX）处理逻辑
```javascript
function uploadFile() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
if (!file) {
alert("请选择一个文件！");
return;
}
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象用于AJAX请求
xhr.open('POST', '/upload', true); // 设置请求方法和目标URL（这里假设服务器端点为'/upload'）
xhr.onload = function() { // 请求完成后的回调函数
if (this.status == 200) { // 请求成功时执行
var response = JSON.parse(this.response); // 解析服务器返回的JSON数据
displayMarkdown(response.markdown); // 显示生成的Markdown内容
} else {
console.error('上传失败:', this.statusText); // 上传失败时打印错误信息到控制台
}
};
xhr.send(formData); // 发送表单数据到服务器端点'/upload'进行文件上传处理和Markdown生成
}
function displayMarkdown(markdown) {
document.getElementById('markdownOutput').textContent = markdown; // 将生成的Markdown显示在页面上预定的位置
}
```
3. 服务器端处理（假设使用Node.js）
假设你使用的是Node.js，并使用express框架，你的服务器端代码可能看起来像这样：
javascript
const express = require('express');
const multer = require('multer'); // 使用multer来处理文件上传
const app = express();
const port = 3000; // 设置端口号
const upload = multer({ dest: 'uploads/' }); // 设置文件存储路径为项目目录下的'uploads/'文件夹
app.post('/upload', upload.single('file'), (req, res) => { // 处理上传的文件请求并返回生成的Markdown文本（示例）: 可以进一步用node-markdown或其他工具库解析文件内容生成Markdown格式文本，这里仅为示例，实际实现需根据文件内容自定义）: 假设：title: "Example Title", keywords: "example, keyword", description: "This is a description.", content: "Here is the main content of the article..."（从文件中读取或用户输入中提取这些信息）: 下面是模拟的响应：res.json({ markdown: "## Example Title\n\n### 描述\nThis is a description.\n\n### 内容\nHere is the main content of the article..." }); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); });
