移动端html5图片上传方法【更好的兼容安卓IOS和微信】

之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了。

 
 
 
 
 
图片压缩 
 
 
 
 
 
 

这个也是把图片转成了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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(移动端html5图片上传方法【更好的兼容安卓IOS和微信】)