node+express+ejs 实现文件上传和预览

最新推荐文章于 2023-08-16 11:23:14 发布

置顶前端真的大牛

最新推荐文章于 2023-08-16 11:23:14 发布

阅读量585

点赞数 1

分类专栏： node.js express 文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq1149436498/article/details/108805577

版权

node.js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

express

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
	</head>
	<body>
		<form enctype="multipart/form-data">
			<input type="file" name="img" id="img">
			<input type="button" value="上传文件" id="btn">
		</form>
	</body>
	<script src="./jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			$('#btn').click(function(){
				var img = document.getElementById('img').files[0];
				var formData = new FormData();
				formData.append('img',img);
				$.ajax({
					url:'http://localhost:3000/push',
					type:'post',
					dataType:'json',
					data:formData,
					processData:false,
					contentType:false,
					success:function(res){
						alert(res.msg)
						$.ajax({
							url:'/watch',
							type:'get',
							dataType:'json',
							data:{},
							processData:false,
							contentType:false,
							success:function(res){
								document.documentElement.innerHTML = res.msg
							}
						})
					}
				})
			})
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				display:flex;
				width:100%;
				justify-content:flex-start;
				flex-wrap:wrap;
			}
			#box div{
				width:300px;
				height:150px;
				overflow:hidden;
				padding:10px
			}
			#box div img{
				width:100%;
			}
		</style>
	</head>
	<body>
		<p><a href="http://localhost:3000/">继续上传</a></p>
		<div id="box">
			<% for(var i = 0;i<arr.length;i++){ %>
				<div><img src="<%= arr[i] %> "></div>
			<% } %>
		</div>
	</body>
</html>

const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');

app.use(express.static('static'));
app.set('view engine','ejs');
app.set('views',__dirname+'/view');

app.get('/',(req,res)=>{
	res.render('index')
})

app.post('/push',(req,res)=>{
	var form = new formidable.IncomingForm();
	form.uploadDir = './static/uploadImg';
	form.parse(req,(err,fields,files)=>{
		if(err){throw err}
		var oldpath = __dirname + "/" + files.img.path;
		var time = new Date().getTime();
		var random = parseInt(Math.random()*10000);
		var path = require('path');
		var extname = path.extname(files.img.name);
		var newpath = __dirname + '/static/uploadImg/' + time +random + extname;
		fs.rename(oldpath,newpath,function(err){
			if(err){
				throw err
			}
			res.send(JSON.stringify({msg:'success'}))
		})
	})
})

app.get('/watch',(req,res)=>{
	var path = './static/uploadImg';
	fs.readdir(path,'utf-8',function(err,files){
		var arr = [];
		files.forEach((item,index)=>{
			if(item.indexOf('.')!=-1){
				arr.push('../uploadImg/'+item)
			}
		})
		res.render('watch',{
			arr
		},(err,html)=>{
			res.send(JSON.stringify({msg:html}))
		})
	})
})

app.listen(3000)

在这里插入图片描述