图片上传
html代码
<input type="file" id="file_input" multiple/>
multiple属性可以用来同时上传多张图片
js代码
// 上传图片
function upPic(dom,callback){
var input = document.getElementById(dom);
if(typeof FileReader==='undefined'){
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',function(){
var _this = this;
for(var i=0;i<this.files.length;i++){
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){
return alert("上传的图片格式不正确,请重新选择")
}
var reader = new FileReader();
reader.readAsDataURL(this.files[i]);
var fileName = this.files[i].name.substring(this.files[i].name.lastIndexOf('.'));
(function(fileName){
reader.onload = function(){
callback(this,fileName);
};
})(fileName);
}
},false);
}
}
upPic('file_input',function(data,fileName){
$.post('../upfile',{'img':data.result.replace(/^data:image\/\w+;base64,/,""),'fileName':fileName},function(result){
oTontent.value+= '\n![]('+ result +')\n';
$('#file_input').val('');
})
})
监听input的change事件,事件中有一个files属性,里面保存着上传的文件,然后通过FileReader对象里面中的readAsDataURL将图片转换成base64,最后将此数据发送给后端。
后端逻辑
var fs = require('fs');
var qs = require('querystring');
exports.upfile = function(req,res){
var currentDate = new Date().getTime();
if(req.url==='/upfile'){
// 写入图片
getData(req,function(data,fileName){
fs.writeFile('./images/articles/' + currentDate + fileName,data,function(err){
if(err){
res.send('0');
}else{
res.send('./articles/' + currentDate + fileName);
}
})
})
}
};
// 获取图片
function getData(req,callback){
var arr = [];
req.on("data",function(data){
arr.push(data);
});
req.on("end",function(){
var data = qs.parse(Buffer.concat(arr).toString());
var img = new Buffer(data.img,'base64');
callback(img,data.fileName);
})
}
监听post事件,并且将数据转成对象,通过Buffer对象将数据转成二进制。写入文件后,将当前文件名和路径发送给前端,并显示到文本框中。
完。