html5 new FileReader()生成图片

html5 使用readAsDataURL生成的base64编码的图片是2进制流,其优点是减少http的请求,缺点是不能跨域缓存。

注:所以在微信本地上传图片直接使用readAsDataURL,安卓是获取不到图片的,需要将其转换为图片,并存入服务器,

例如:

 var reader = new FileReader();
           reader.onload = (function(theFile) {
           return function(e){
           var src=e.target.result ;
         var data=src.split(",")[1];
data=window.atob(data);
             var ia = new Uint8Array(data.length);
             for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
             };
             // canvas.toDataURL 返回的默认格式就是 image/png
             var blob=new Blob([ia], {type:"image/png"});
         var fd=new FormData();
/***** 如果 FormData 对象中的某个字段值是一个 Blob 对象,则在发送 HTTP 请求时,代表该 Blob 对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob",而 Chrome 使用了一个随机字符串。*******/
fd.append('headPhototUrl',blob);
           $.ajax({
           data:fd,
           type:"post",
           dataType:"json",
           processData : false,   //使得jquery不处理请求数据
             contentType: false,  //使得jquery不设置content-type请求头
           url:"/huahan/UploadPhoto.do",
           success:function(result){
           if(result.errorCode==0){
           $(".h_picBox .loadPic").eq(index).find("span").html("<img src='"+ result.data +"' />");
}else{
ajaxError(result.errormsg);
}
           }
           });
             };
           })(f);
           reader.readAsDataURL(f);

猜你喜欢

转载自blog.csdn.net/stone10086/article/details/80176001