js如何创建一个文件夹并将上传的文件保存进去
时间: 2024-02-28 17:57:35 浏览: 198
JavaScript 本身也无法在客户端创建文件夹,但是可以通过向服务器发送请求,在服务器端创建文件夹,然后将上传的文件保存到该文件夹中。
具体实现可以分为以下几个步骤:
1. 通过前端页面创建一个文件上传框,让用户选择要上传的文件。
```html
<input type="file" id="fileInput">
```
2. 使用 JavaScript 获取上传框中选择的文件,并将其发送到服务器端。
```javascript
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
var formData = new FormData();
formData.append('file', file);
xhr.send(formData);
```
3. 在服务器端接收上传的文件,并在指定路径下创建一个文件夹。
以 Node.js 为例,可以使用 `fs` 模块中的 `mkdir` 方法来创建文件夹。在创建文件夹的同时,也可以使用 `createWriteStream` 方法创建一个可写流,将上传的文件写入到该文件夹中。
```javascript
const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();
app.post('/upload', (req, res) => {
const file = req.files.file;
const folderPath = path.join(__dirname, 'uploads', 'folder');
const filePath = path.join(folderPath, file.name);
fs.mkdir(folderPath, { recursive: true }, (err) => {
if (err) throw err;
const writeStream = fs.createWriteStream(filePath);
file.pipe(writeStream);
writeStream.on('finish', () => {
res.send('上传成功!');
});
});
});
app.listen(3000, () => {
console.log('服务器启动成功!');
});
```
在这个例子中,我们在 `uploads` 文件夹下创建了一个名为 `folder` 的子文件夹,然后将上传的文件保存到该文件夹中。需要注意的是,在使用 `mkdir` 方法创建文件夹时,需要将 `recursive` 参数设置为 `true`,以确保可以创建多级文件夹。
阅读全文