博客项目之图片上传

图片上传

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对象将数据转成二进制。写入文件后，将当前文件名和路径发送给前端，并显示到文本框中。

完。