base64图片上传

首先来看一下HTML5的FileReader对象

方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

接口事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

下面是实现

javascript

function readAsDataURL(m_this,id){

      if (typeof m_this.files == 'undefined' || typeof FileReader == 'undefined') {
            alert('当前浏览器不支持图片上传，请改用IE10以上或chrome等最新浏览器。');
            return false;
   }

      if(!/image\/\w+/.test(m_this.files[0].type)){  
          alert("请上传图片！");  
          return false;  
      } 

      var reader = new FileReader();
      reader.onload = function(e) {
            //this.result 返回结果
            $(id).attr('src',this.result);
            //把结果放在img对象中，以备他用  
            var img = new Image();
            img.src = result;
      }
      reader.readAsDataURL(m_this.files[0]); 
}

//调用
$('#inputFile').on('change',function(){
    var m_this = this;
    readAsDataURL(m_this,'#ImgPr');                 
})

html