ajax异步提交base64图片字符串需要注意的问题

利用ajax异步提交base64图片字符串需要注意这些问题

1，利用ajax提交base64图片字符串的时候，因为base64字符串中有特殊字符，会被转移，需要str.replace(/\&/g,"%26");str.replace(/\+/g,"%2B");

把字符串中的‘&’、+ 转义

2 。或把base64图片字符串 encodeURIComponent(dataurl) 加密

3，数据格式可以用对象形式传送

提交数据的时候会通过js函数encodeURI()对参数加密：把参数中的中文和某些特殊字符转换成16进制编码   encodeURI相当于PHP函数中的urlencode()

第一种

 function ajaxupload(){

    var img=document.getElementById('upimg').files[0];
    var reader=new FileReader();
    reader.readAsDataURL(img);
    var baseimg='';
    reader.onload=function(m){
      $("#showImg").attr('src',this.result);
      $("#baseimg").val(this.result);
      baseimg=this.result;
     baseimg=baseimg.replace(/\&/g,"%26");
    baseimg=baseimg.replace(/\+/g,"%2B");
      $.ajax({
        url:"/index.php?r=cate&m=add",
        type:"post",
        data:"baseimg="+baseimg,
        dataType:'json',
        success:function(m){
           console.log(m.data[0]);
        }
      });
    }

第二种

function ajaxupload(){

    var img=document.getElementById('upimg').files[0];
    var reader=new FileReader();
    reader.readAsDataURL(img);
    var baseimg='';
    reader.onload=function(m){
      $("#showImg").attr('src',this.result);
      $("#baseimg").val(this.result);
      baseimg=this.result;
     
      $.ajax({
        url:"/index.php?r=cate&m=add",
        type:"post",
        data:{baseimg:baseimg},
        dataType:'json',
        success:function(m){
           console.log(m.data[0]);
        }
      });
    }

第三种

function ajaxupload(){

    var img=document.getElementById('upimg').files[0];
    var reader=new FileReader();
    reader.readAsDataURL(img);
    var baseimg='';
    reader.onload=function(m){
      $("#showImg").attr('src',this.result);
      $("#baseimg").val(this.result);
      baseimg=this.result;
     
      $.ajax({
        url:"/index.php?r=cate&m=add",
        type:"post",
        data:"baseimg="+encodeURIComponent(baseimg),
        dataType:'json',
        success:function(m){
           console.log(m.data[0]);
        }
      });
    }