移动端图片上传方法【更好的兼容安卓IOS和微信】
导读：本文共4138字符，通常情况下阅读需要14分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个demo了。<!doctypehtml><html><head><metacharset="utf-... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个demo了。
<!doctypehtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>图片压缩</title><style>body{margin:0;padding:0;}html{font-size:62.5%;}.imgzip{padding:1em;}.imgzip.itm{padding-bottom:1em;word-break:break-all;font-size:1.2rem;line-height:1.5em;}.imgzip.itm.tit{margin-bottom:.5em;background-color:#e71446;color:#FFF;padding:.5rem1rem;border-radius:3px;}.imgzip.itm.cnt{padding:1rem;}.imgzip.itm.cntimg{display:block;max-width:100%;}.imgziptextarea{width:100%;height:20em;}</style></head><body><scriptsrc="http://code.jquery.com/jquery-1.8.3.js"></script><inputtype="file"accept="image/*;capture=camera"class="input"><divclass="imgzip"></div><script>document.addEventListener('DOMContentLoaded',init,false);functioninit(){varu=newUploadPic();u.init({input:document.querySelector('.input'),callback:function(base64){$.ajax({url:"{:U('upload')}",data:{str:base64,type:this.fileType},type:'post',dataType:'json',success:function(i){alert(i.info);}})},loading:function(){}});}functionUploadPic(){this.sw=0;this.sh=0;this.tw=0;this.th=0;this.scale=0;this.maxWidth=0;this.maxHeight=0;this.maxSize=0;this.fileSize=0;this.fileDate=null;this.fileType='';this.fileName='';this.input=null;this.canvas=null;this.mime={};this.type='';this.callback=function(){};this.loading=function(){};}UploadPic.prototype.init=function(options){this.maxWidth=options.maxWidth||800;this.maxHeight=options.maxHeight||600;this.maxSize=options.maxSize||3*1024*1024;this.input=options.input;this.mime={'png':'image/png','jpg':'image/jpeg','jpeg':'image/jpeg','bmp':'image/bmp'};this.callback=options.callback||function(){};this.loading=options.loading||function(){};this._addEvent();};/***@description绑定事件*@param{Object}elm元素*@param{Function}fn绑定函数*/UploadPic.prototype._addEvent=function(){var_this=this;functiontmpSelectFile(ev){_this._handelSelectFile(ev);}this.input.addEventListener('change',tmpSelectFile,false);};/***@description绑定事件*@param{Object}elm元素*@param{Function}fn绑定函数*/UploadPic.prototype._handelSelectFile=function(ev){varfile=ev.target.files[0];this.type=file.type//如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题）if(!this.type){this.type=this.mime[file.name.match(/\.([^\.]+)$/i)[1]];}if(!/image.(png|jpg|jpeg|bmp)/.test(this.type)){alert('选择的文件类型不是图片');return;}if(file.size>this.maxSize){alert('选择文件大于'+this.maxSize/1024/1024+'M，请重新选择');return;}this.fileName=file.name;this.fileSize=file.size;this.fileType=this.type;this.fileDate=file.lastModifiedDate;this._readImage(file);};/***@description读取图片文件*@param{Object}image图片文件*/UploadPic.prototype._readImage=function(file){var_this=this;functiontmpCreateImage(uri){_this._createImage(uri);}this.loading();this._getURI(file,tmpCreateImage);};/***@description通过文件获得URI*@param{Object}file文件*@param{Function}callback回调函数，返回文件对应URI*return{Bool}返回false*/UploadPic.prototype._getURI=function(file,callback){varreader=newFileReader();var_this=this;functiontmpLoad(){//头不带图片格式，需填写格式varre=/^data:base64,/;varret=this.result+'';if(re.test(ret))ret=ret.replace(re,'data:'+_this.mime[_this.fileType]+';base64,');callback&&callback(ret);}reader.onload=tmpLoad;reader.readAsDataURL(file);returnfalse;};/***@description创建图片*@param{Object}image图片文件*/UploadPic.prototype._createImage=function(uri){varimg=newImage();var_this=this;functiontmpLoad(){_this._drawImage(this);}img.onload=tmpLoad;img.src=uri;};/***@description创建Canvas将图片画至其中，并获得压缩后的文件*@param{Object}img图片文件*@param{Number}width图片最大宽度*@param{Number}height图片最大高度*@param{Function}callback回调函数，参数为图片base64编码*return{Object}返回压缩后的图片*/UploadPic.prototype._drawImage=function(img,callback){this.sw=img.width;this.sh=img.height;this.tw=img.width;this.th=img.height;this.scale=(this.tw/this.th).toFixed(2);if(this.sw>this.maxWidth){this.sw=this.maxWidth;this.sh=Math.round(this.sw/this.scale);}if(this.sh>this.maxHeight){this.sh=this.maxHeight;this.sw=Math.round(this.sh*this.scale);}this.canvas=document.createElement('canvas');varctx=this.canvas.getContext('2d');this.canvas.width=this.sw;this.canvas.height=this.sh;ctx.drawImage(img,0,0,img.width,img.height,0,0,this.sw,this.sh);this.callback(this.canvas.toDataURL(this.type));ctx.clearRect(0,0,this.tw,this.th);this.canvas.width=0;this.canvas.height=0;this.canvas=null;};</script></body></html>这个也是把图片转成了base64去传送，个人不建议去用js改变图片的大小，建议裁切缩放还是PHP来做吧。
this.maxWidth=options.maxWidth||800;this.maxHeight=options.maxHeight||600;this.maxSize=options.maxSize||3*1024*1024;this.input=options.input;this.mime={'png':'image/png','jpg':'image/jpeg','jpeg':'image/jpeg','bmp':'image/bmp'};这一部分是对上传图片的配置，应该可以看懂，可以自己去改
$.ajax({url:"{:U('upload')}",data:{str:base64,type:this.fileType},type:'post',dataType:'json',success:function(i){alert(i.info);}这部分是上传以后ajax发送base64码到php,
base64码带有图片的说明字符串，所以得用正则去掉，然后base64解码保存到图片的文件中。并且返回地址即可
upload.php的内容
$str=$_POST['str']; $type=$_POST['type']; switch($type){ case'image/png': $ext='.png'; break; case'image/jpeg'; $ext='.jpeg'; break; case'image/jpeg': $ext='.jpg'; break; case'image/bmp': $ext='.bmp'; break; default: $ext='.jpg'; } $file_path='./Uploads/'.date('Ymd').'/'.time().$ext; if(!file_exists(dirname($file_path))){ mkdir(dirname($file_path),0777,true); } $img_content=str_replace('data:'.$type.';base64,','',$str); $img_content=base64_decode($img_content); $result=file_put_contents($file_path,$img_content);个人博客已转移到尛雷个人博客
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
移动端图片上传方法【更好的兼容安卓IOS和微信】的详细内容，希望对您有所帮助，信息来源于网络。