1.前端html页面
<form id="knowledge" class="form-horizontal popup" >
<input type="file" class="fileUpload" name="file" id="upload-file" >
<input type="submit" id="btnCrop" class="Btnsty_peyton" value="OK"></form>2.jquery中的实现为：
$("#btnCrop").click(function(){
if ($('.fileUpload').val().length) {var fileName = $('.fileUpload').val();//获取文件大小 var uplo = document.getElementById("upload-file");var fSize = ((uplo.files[0].size)/1024).toFixed(2);//获取图片大小转换成KB //限制文件上传的大小在1-100KB以内 if(fSize < 1 || fSize > 100){layer.alert("图片大小在1-100以内",{icon:5});}else{var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();if (extension == ".jpg" || extension == ".png") {var data = new FormData();data.append('upload', $('#upload-file')[0].files[0]);//+'&linkName='+linkName+'&addressUrl='+addressUrl+'&homeId='+homeId $.ajax({url: '/manage/home/homeUpload/editLink',type: 'POST',data: data,cache: false,contentType: false, //不可缺参数processData: false, //不可缺参数success: function (data) {if (data.code == 0) {var fileUrls = data.fileUrl;layer.msg('上传成功!',{icon:5});} else {layer.msg(data.msg, {icon: 5});}},error: function () {console.log('error');}});}else{layer.alert("只支持jpg、png格式的图片",{icon:5});}}}
});
其中url是你nodejs服务端路由，可以根据你的路由去更改
3.nodejs服务端代码
先安装fs模块，cmd命令中切换到项目根目录下输入npm install --save fs进行安装
然后在项目中导入fs模块：var fs = require('fs');
下一步接收上传的图片：
router.post('/uploadFile', function(req, res) {if (!fs.existsSync(cacheFolder)) {fs.mkdirSync(cacheFolder);}var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = 'utf-8'; //设置编辑 form.uploadDir = cacheFolder; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 form.type = true;var displayUrl;form.parse(req, function(err, fields, files) {if (err) {res.send(err);return;}var extName = ''; //后缀名var test;//格式话解析files获取其中的属性值for(var i in files){if(i.indexOf('input') > -1){test = eval(files[i]);}}//判断图片后缀名类型switch (test.type) {case 'image/pjpeg':extName = 'jpg';break;case 'image/jpeg':extName = 'jpg';break;case 'image/png':extName = 'png';break;case 'image/x-png':extName = 'png';break;}if (extName.length === 0) {res.send({code: 202,msg: '只支持png和jpg格式图片',});return;} else {//新的图片名称var avatarName = '/' + Date.now() + '.' + extName;//新图片名称加存放路径var newPath = form.uploadDir + avatarName; fs.renameSync(test.path, newPath); //重命名res.send({code: 200,msg: '上传成功',urlLogo:newPath });}});});到此完美结束
