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

来源：互联网发布：收购淘宝店铺是真的吗编辑：程序博客网时间：2024/06/05 00:15

利用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]);        }      });    }

0 0