nodejs+express4实现文件上传下载删除和列表展示功能
0.效果展示
1.创建项目
创建文件夹:express_file_upload
npm init
# 入口文件选择server.js
- 安装插件
npm install express
npm install nodemon -g
npm install body-parser multer
npm install ejs
参考资料
2.上传文件
上传页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传</title>
</head>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="提交">
</form>
<body>
</body>
</html>
路由
// 上传页面
router.get('/', (req, res)=>{
console.log(__dirname)
res.sendFile(path.join(__dirname,'../views/upload.html'))
}) // 上传文件
router.post('/upload', upload.single('file'), function(req, res) {
console.dir(req.files) if (!req.file || Object.keys(req.file).length === 0) {
res.status(400).send('请选择要上传的文件!');
return;
} // res.send('Success.');
// 重定向到列表页
res.redirect('/filelist')
});
3.文件列表
列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件列表</title>
</head>
<body>
<h4>文件列表</h4>
<ul id="filelist"></ul> <script src="/static/jquery.js"></script>
<script>
$(function(){
init();
}) function init(){
$.ajax({
type: 'GET',
url:'/getFileList',
success: function(data){
console.log(data)
$.each(data, function(index,item){
$("#filelist").append("<li><a href='/download?path="+item.path+"'>"+
item.name+"</a> "+getFileSize(item.size)+
" <button οnclick='deleteFile(\""+item.path+"\")'>删除</button></li>");
}) }
})
} function getFileSize(size){
if(size < 1024){
return size+'KB'
}else if(size >= 1024&&size<Math.pow(1024, 3)){
return (size/1024.0/1024).toFixed(2)+'MB'
}else{
return (size/1024.0/1024/1024).toFixed(2)+'GB'
} } function deleteFile(path){
var param={"path": path};
console.log(path)
if (confirm('确定删除?')){
$.ajax({
type: 'POST',
url:'/delete?path='+path,
data: JSON.stringify(param),
success: function(data){
window.location.reload();
}
})
} return false; } </script>
</body>
</html>
路由
// 列表页面
router.get('/filelist',function(req, res){
res.sendFile(path.join(__dirname,'../views/filelist.html'))
}) // 获取文件列表
router.get('/getFileList',function(req, res, next){
var filelist = getFileList('upload')
res.send(filelist)
}) function getFileList(path){
var filelist = [];
readFile(path, filelist); return filelist;
} function readFile(path, filelist){
var files = fs.readdirSync(path);
files.forEach(walk); function walk(file)
{
var state = fs.statSync(path+'/'+file)
if(state.isDirectory()){
readFile(path+'/'+file, filelist)
}else{
var obj = new Object;
obj.size = state.size;
obj.name = file;
obj.path = path+'/'+file;
filelist.push(obj);
}
}
}
4.下载文件
// 下载文件
router.get('/download',function(req,res){
var filePath = req.query.path;
console.log('下载文件:'+filePath)
filePath = path.join(__dirname,'../'+filePath);
res.attachment(filePath)
res.sendFile(filePath)
})
5.删除文件
// 删除文件
router.post('/delete', function(req, res, next){
var filePath = req.query.path;
console.log('删除文件:'+filePath)
try {
fs.unlinkSync(filePath)
// 重定向到列表页
res.send('删除成功')
} catch (error) {
res.send('删除失败')
}
})
源码地址
https://gitee.com/indexman/express_file_upload
路过的给老徐点个赞加个关注收藏:)
nodejs+express4实现文件上传下载删除和列表展示功能的更多相关文章
- nodejs+express-实现文件上传下载管理的网站
Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
- java操作FTP,实现文件上传下载删除操作
上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...
- [java]文件上传下载删除与图片预览
图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...
- Java 客户端操作 FastDFS 实现文件上传下载替换删除
FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- 【FTP】FTP文件上传下载-支持断点续传
Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...
- FastDFS实现文件上传下载实战
正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
随机推荐
- JMS微服务开发示例(六)安全退出进程
默认情况下,如果在linux,需要关闭微服务进程,请务必使用 kill -15 进程id 命令,其他命令可能会直接关闭进程,造成数据丢失. 例如,有个后台任务,执行了一半,这时候进程突然关闭了,会形成 ...
- [转帖]Nginx - 根据IP分配不同的访问后端
https://www.cnblogs.com/hukey/p/11868017.html 1. 需求分析 为了在线上环境提供测试分支,规定将某IP转发到测试程序地址.如果是 ngx 直接对外,采用 ...
- [转帖]Centos使用chrony做时间同步
https://www.cnblogs.com/lizhaoxian/p/11260041.html Chrony是一个开源的自由软件,在RHEL 7操作系统,已经是默认服务,默认配置文件在 /etc ...
- [转帖]TiDB BR 备份至 MinIO S3 实战
https://tidb.net/blog/3a31d41d#3.%E9%83%A8%E7%BD%B2%20MinIO%20S3%20%E5%8F%8A%E5%A4%87%E4%BB%BD%E6%81 ...
- [转帖]MegaCli命令
MegaCli命令 设置jbod模式 1.3 LSI 9260/9261 raid卡配置 LSI 9260/9261 raid卡支持0.1.10.5.6.50.60 常用命令: 清除raid卡原有的配 ...
- [转帖]CentOS 7 下用 firewall-cmd / iptables 实现 NAT 转发供内网服务器联网
https://www.cnblogs.com/hope250/p/8033818.html 自从用 HAProxy 对服务器做了负载均衡以后,感觉后端服务器真的没必要再配置并占用公网IP资源.而且由 ...
- [转帖]Windows磁盘性能压测(1)-DiskSpd
http://www.manongjc.com/detail/59-xrydhtisrajqsxn.html 本文章向大家介绍Windows磁盘性能压测(1)-DiskSpd,主要内容包括其使用实例. ...
- [转帖]linux,wget 的证书不可信,证书使用不安全的算法签名
centos wget 的证书不可信,证书使用不安全的算法签名 wget wget https://www.php.net/distributions/php-7.4.28.tar.gz 出现错误: ...
- [转帖]深入内存/主存:解剖DRAM存储器
https://zhuanlan.zhihu.com/p/561501585 2022/9/9更新:经过和评论区大佬的交流,准备研读一下JEDEC标准,主要是加深自己对banking和访存加速的理解( ...
- OpenSSH 9.2P1升级以及版本显示的处理过程
说明 本次维护的时间是 2023-2-9 最新已发布的补丁是 OpenSSH9.2P1版本 其他本本应该是类似处理. 下载介质 在 OpenSSH官网打开相关界面. http://www.openss ...