<!DOCTYPE html> <html> <head> <title><%=title%></title> </head> <body> <form method='post' enctype='multipart/form-data' id = "fromUploadFile"> 姓名: <input type="text"><br> <input type="file"><br> <button>上传</button> </form> <div> <img id=imgShow> <p></p> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="js/ipload.js"></script> </html>
ipload.js
function uploadFile(){ var fromData=new FormData($("#fromUploadFile")[0]); $.ajax({ url: '/uploadhaha', type: 'post', data: fromData, async: false, cache: false, contentType: false, processData: false, success: function(data){ if(200 === data.code) { $("#imgShow").attr('src', data.msg.url); $("#spanMessage").html("上传成功"); } else { $("#spanMessage").html("上传失败"); } console.log('imgUploader upload success, data:', data); }, error: function(){ $("#spanMessage").html("与服务器通信发生错误"); } }); }
二.上传多组照片
导入模块 "formidable":"1.1.1"
在package.json中加入 "formidable":"1.1.1";
package.json
{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "nodejs ./bin/www" }, "dependencies": { "express": "~4.0.0", "static-favicon": "~1.0.0", "morgan": "~1.0.0", "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "debug": "~0.7.4", "ejs": "~0.8.5", "multer":"0.1.6", "connect-flash": "0.1.1", "md5":"^2.1.0", "connect-multiparty": "~1.2.5", "formidable":"1.1.1" } }
主要代码
app.use('http://www.cnblogs.com/', routes); app.use('/users', users); app.use('/test', test); app.use('/up',upload); app.use('/uploadtupian',uploadtupian);
然后再router文件夹中
新建uploadtupian.js
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('http://www.cnblogs.com/', function(req, res) { res.render('up', { title: '上传多组图片' }); }); module.exports = router;
然后视图文件夹下
新建up.html
<!DOCTYPE html> <html> <head> <title><%=title%></title> </head> <body> '<form enctype="multipart/form-data" method="post" action="/up">'+ '<input type="text" /> '+ '<input type="text" /> '+ '<input type="file" multiple="multiple" /> '+ '<input type="file" multiple="multiple" /> '+ '<input type="submit" value="提交">'+ '</form>' </body> </html>
app.js
中添加app.use('/up',upload);
在router文件夹中添加
upload.js文件
var express =require('express'); var path = require('path'); var router =express.Router(); var formidable=require('formidable'); var fs=require('fs'); router.post('http://www.cnblogs.com/',function(req,res,next){ console.log(req.body); var form=new formidable.IncomingForm(); form.uploadDir='/tmp'; form.keepExtensions=true; var targetDir=path.join(__dirname,'../public/upload'); fs.access(targetDir,function(err){ if(err){ fs.mkdirSync(targetDir); } _fileParse(); }); function _fileParse(){ form.parse(req,function(err,fields,files){ console.log(fields); if(err) throw err; var fileUrl=[]; var errCount=0; var keys=Object.keys(files); keys.forEach(function(key){ var filePath=files[key].path; var fileExt=filePath.substring(filePath.lastIndexOf('.')); if(('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase())==-1){ errCount+=1; } else{ var fileName=new Date().getTime()+fileExt; var targetFile=path.join(targetDir,fileName); // fs.renameSync(filePath,targetFile); fileUrl.push('/upload'+fileName); } }) res.json({fileUrl:fileUrl,success:keys.length-errCount, error:errCount}) }) } }) module.exports=router;
至此完成两种node上传图片的方法
相关文章
精彩导读
热门资讯
关注我们
