文件上传是每个网站不可避免的，最近需要做些上传图片的功能，主要解决两个问题，一个是文件上传样式和服务端路径保存，功能很简单，做起来倒是没那么简单，先从最简单的页面的上传页面的样式开始。

页面样式

超文本标记语言页面默认的上传的是比较难看的，需要重做一个背景图片，通过背景图片添加上传的图片：

上传图片样式：

div class='上传-容器'输入类型=' file ' name=' file topload ' id=' file topload ' class=' file upload '/div CSS样式：上传-容器{后台-图像：网址(././images/RV/add。jpg)；背景-重复：不重复；宽度： 180像素；高度： 200像素；填充-底部： 10px显示器：内联块；垂直对齐： 中间；文件上传{ opa city 3360 } 0；filter: alpha(不透明度=0);宽度： 200像素；高度： 200像素；}} Html点击上传有两种比较常用的方式内联框架上传和埃阿斯上传，本文采用了埃阿斯上传是HTML5提出了XMLHttpRequest对象的第二版，传递文件数据主要是通过表单数据实现：

$('.文件上传').change(function(event){/* action on event */if($(')).文件上传').val().长度){ var fileName=$(' .文件上传').val()；定义变量扩展名=文件名。子字符串(文件名。的最后一个索引(' . '))，fileName.length).toLowerCase()；如果(扩展名=='。jpg' ||扩展名=='。png '){ var data=new FormData()；data.append('upload '，$(' # filetopload ')[0]).文件[0]);$.ajax({ url: 'apply/upload '，type: 'POST '，data: data，cache: false，contentType: false，//不可缺参数processData: false，//不可缺参数成功：函数（数据){ console.log(数据);}，错误：函数(){ console。日志('错误')；} });} }});服务端保存

NodeJS服务端保存需要使用了第三方插件节点强大的国家预防机制安装地址：

国家预防机制安装[电子邮件保护]上传图片

var cacheFolder=' public/images/uploadcache/'；brexports.upload=function(req，RES){ var currentUser=req。会话。用户；var userDirPath=cacheFolder current user。id；if(！fs。existssync(userDirPath)){ fs。mkdirsync(userDirPath)；} var形式=新的强大IncomingForm()；//创建上传表单形式。编码=“utf-8”；//设置编辑form.uploadDir=userDirPath//设置上传目录form.keepExtensions=true//保留后缀形式。maxfieldssize=2 * 1024 * 1024//文件大小form . type=true var displayurlform . parse(req，function(err，fields，file)){ if(err){ RES . send(err)；返回；} var extName=//后缀名开关(文件。上传。type){ case ' image/pj peg ' : extName=' jpg '；打破；大小写image/JPEG ' : extName=' jpg '；打破；大小写" image/png " : extName=" png "；打破；大小写" image/x-png " : extName=" png "；打破；} if(extname。长度===0){ RES . send({代码： 202，msg: '只支持巴布亚新几内亚和使用联合图象专家组文件交换格式存储的编码图像文件扩展名格式图片' });返回；} else { var avatar name='/' date。现在().extNamevar新路径=表单。uploaddir头像名称；显示URl=UPLOAD _ FOLDER当前用户。id头像名称；fs。renamesync(文件。上传。路径，新路径)；//重命名res.send({ code: 200，msg :显示URl })；} });};不同用户上传置放在不同的位置，根据需求来设置，当然也有可以每张图片都给不同的编号编号，推荐第三方uuid插件：https://github.com/broofa/node-uuid

文件重命名：

fs。renamesync(文件。上传。路径，新路径)；//重命名文件上传进度：

form.on('progress '，function(bytesReceived，bytes expected){ })；node-令人生畏有许多官方API和许多设置选项。本文根据要求设置了几个项目。如有额外要求，可参考官方地址~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。