node.js 通过ajax上传图片这个阶段，利用晚上剩余的时间用node.js+mongdb+express+jade去实现自己的一个博客网站，里面的发表博客中需要用到上传图片，嵌入到自己用textarea标签实现的markdown编辑器中。这部分实现是利用了html5的formdata函数去实现
html代码(jade)：
form#uploadfilediv.form-groupinput#inputfile(type=file name=inputfile)p.help-block#upfiletip 只支持png和ipg格式的图片上传button.btn.btn-success(type=button onclick=upfile()) 上传
ajax代码(javascript):
//判断图片的格式是否是png/ipg的格式
function judgephotoext(name){
if(name.length === 0){
$(#upfiletip).css(color,red);
$(#upfiletip).text = 你没有选择任何图片！！！
return false;
}
var extname = name.substring(name.lastindexof('.'),name.length).tolowercase();
if(extname != '.png' && extname != '.ipg'){
$(#upfiletip).css(color,red);
$(#upfiletip).text = 只支持png和ipg格式的格式的文件!!!
return false;
}
return true;
}
//上传图片文件
function upfile(){
var filename = $(#inputfile).val();
if(judgephotoext(filename)){
var data = new formdata(); var files = $(#inputfile)[0].files;
if(files){
data.append(file, files[0]);
}
$.ajax({
url: '/blog/photo/new',
type: 'post',
data: data,
async: false,
cache: false,
contenttype: false,
processdata: false,
success: function(data){
var text = $(#content-textarea).val();
text = text+;
$(#content-textarea).val(text);
$('#imagemodal').modal('hide');
},
error: function(err){
console.log(err);
}
})
}
}
注意：其中一定要注意的点：processdata的属性要设置为false，这个是html5的属性，如果没有设置为false的话，这个地方会出问题。主要是文件的内容不希望转换成字符串。具体可查看jquery ajax的参数解释：http://www.w3school.com.cn/jquery/ajax_ajax.asp
对于formdata对象，你可以先创建一个空的formdata对象,然后使用append()方法向该对象里添加字段(引用别的网站的描述)
比如：
var omyform = new formdata();
omyform.append(username, groucho);
omyform.append(accountnum, 123456); // 数字123456被立即转换成字符串123456
// fileinputelement中已经包含了用户所选择的文件
omyform.append(userfile, fileinputelement.files[0]);
var ofilebody = hey!; // blob对象包含的文件内容
var oblob = new blob([ofilebody], { type: text/xml});
omyform.append(webmasterfile, oblob);
var oreq = new xmlhttprequest();
oreq.open(post, http://foo.com/submitform.php);
oreq.send(omyform);
这部分内容需要查看formdata对象的具体内容，可查看该网址：http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
node.js后台代码如下：
router.post('/photo/new',function(req,res,next){
let form = new formidable.incomingform(); //创建上传表单
form.uploaddir = upload_path;
form.keepextensions = true; //保留后缀
form.maxfieldssize = 4*1024*1024; //文件大小
form.parse(req,function(err,fields,files){
if(err){
res.send(插入标签失败);
return;
}
let extname = '';
let urls = [];
for(var key in files){
let file = files[key];
switch(file.type){
case 'image/pjpeg':
extname = 'jpg';
break;
case 'image/jpeg':
extname = 'jpg';
break;
case 'image/png':
extname = 'png';
case 'image/x-png':
extname = 'png';
break;
}
if(extname.length === 0){
res.send(只支持png和jpg格式的图片文件);
return;
}
let savename = uuid.v1()+'.'+extname;
let savepath = form.uploaddir+savename;
urls.push(photo_url+savename);
fs.renamesync(file.path,savepath);
}
res.send(urls[0]);
})
})
使用formidable库辅助实现
其实里面最重要的还是formdata的使用，用html5实现这部分的异步上传还是比较方便的
http://www.bkjia.com/phpjc/1114324.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/1114324.htmltecharticlenode.js 通过ajax上传图片 这个阶段，利用晚上剩余的时间用node.js+mongdb+express+jade去实现自己的一个博客网站，里面的发表博客中需要用到上传...