移动端html5图片上传方法【更好的兼容安卓IOS和微信】
之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个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);
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。