html+js上传图片到指定文件夹并在前端显示图片
时间: 2023-09-18 13:09:21 浏览: 279
好的,以下是一个简单的实现方法:
1. 在 HTML 页面上添加一个文件选择框和一个按钮,用于触发上传事件:
```html
<input type="file" id="fileInput">
<button onclick="upload()">上传</button>
```
2. 在 JavaScript 中定义上传函数 `upload()`,获取用户选择的文件,并创建一个 FormData 对象,将文件添加到 FormData 中,同时添加一个自定义参数 `folder`,用于指定上传到服务器的哪个文件夹:
```javascript
function upload() {
// 获取文件选择框中的文件
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
// 创建 FormData 对象
const formData = new FormData();
// 添加文件到 FormData 中
formData.append('file', file);
// 添加自定义参数到 FormData 中
formData.append('folder', 'uploads');
// 发送 POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
}
```
3. 在服务器端接收到 POST 请求后,解析 FormData 中的文件和自定义参数,将文件保存到指定的文件夹中。这里以 Node.js 为例:
```javascript
const express = require('express');
const app = express();
const multer = require('multer');
const path = require('path');
// 设置文件上传的目录
const storage = multer.diskStorage({
destination: function (req, file, cb) {
const folder = req.body.folder || 'uploads';
cb(null, folder);
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
// 处理文件上传的 POST 请求
app.post('/upload', upload.single('file'), (req, res) => {
res.send('上传成功');
});
```
4. 在上传成功后,将上传的图片在前端页面中显示出来。这里使用 FileReader API 将图片文件读取为 Base64 编码,然后将 Base64 编码的字符串作为图片的 `src` 属性值,显示在页面中:
```javascript
function upload() {
// 获取文件选择框中的文件
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
// 创建 FormData 对象
const formData = new FormData();
// 添加文件到 FormData 中
formData.append('file', file);
// 添加自定义参数到 FormData 中
formData.append('folder', 'uploads');
// 发送 POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
// 上传成功后,将图片显示出来
const reader = new FileReader();
reader.onload = function () {
const img = document.createElement('img');
img.src = reader.result;
document.body.appendChild(img);
};
reader.readAsDataURL(file);
};
xhr.send(formData);
}
```
以上就是一个简单的上传图片并显示的实现方法。需要注意的是,上传图片的过程中,需要对图片进行一些验证和处理,比如检查图片类型、大小、防止上传恶意脚本等。此外,服务器应该设置好文件夹的权限,避免上传到不该上传的文件夹中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)