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

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

<！doctype html> <html> <head> <meta charset="utf-8"> <meta name="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:.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; } </style> </head><body> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <input type="file" accept="image/*;capture=camera" class="input"> <div class="imgzip"></div> <script> document.addEventListener（"DOMContentLoaded", init, false）;function init（） { var u = new UploadPic（）; 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 （） {} }）; }function UploadPic（） { 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;function tmpSelectFile（ev） { _this._handelSelectFile（ev）; }this.input.addEventListener（"change", tmpSelectFile, false）; };/** * @description 绑定事件 * @param {Object} elm 元素 * @param {Function} fn 绑定函数 */ UploadPic.prototype._handelSelectFile = function （ev） { var file = 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;function tmpCreateImage（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） { var reader = new FileReader（）; var _this = this;function tmpLoad（） { // 头不带图片格式，需填写格式 var re = /^data:base64,/; var ret = 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）;return false; };/** * @description 创建图片 * @param {Object} image 图片文件 */ UploadPic.prototype._createImage = function （uri） { var img = new Image（）; var _this = this;function tmpLoad（） { _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"）; var ctx = 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）;

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