移动端html5图片上传方法

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

 
 
 
 
 
 
 
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:.5rem 1rem; border-radius:3px; } 
.imgzip .itm .cnt { padding:1rem; } 
.imgzip .itm .cnt img { display:block; max-width:100%; } 
.imgzip textarea { width:100%; height:20em; } 
 
 
 
 
 
 
 
 
 

这个也是把图片转成了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上传操作汇总》进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。