移动端图片上传方法【更好的兼容安卓IOS和微信】
- WBOY原創
- 2016-06-07 11:41:002427瀏覽
之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个demo了。
之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个demo了。
nbsp;html> <br>
<br>
<br>
<meta> <br>
<meta> <br>
<title>图片压缩</title> <br>
<style> <br />
body { margin:0; padding:0; } <br />
html { font-size:62.5%; } <br />
<br />
.imgzip { padding:1em; } <br />
.imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; } <br />
.imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; } <br />
.imgzip .itm .cnt { padding:1rem; } <br />
.imgzip .itm .cnt img { display:block; max-width:100%; } <br />
.imgzip textarea { width:100%; height:20em; } <br />
</style> <br>
<br>
<br>
<br>
<script></script> <br>
<input> <br>
<div></div> <br>
<script> <br />
document.addEventListener('DOMContentLoaded', init, false); <br />
<br />
function init() { <br />
var u = new UploadPic(); <br />
u.init({ <br />
input: document.querySelector('.input'), <br />
callback: function (base64) { <br />
$.ajax({ <br />
url:"{:U('upload')}", <br />
data:{str:base64,type:this.fileType}, <br />
type:'post', <br />
dataType:'json', <br />
success:function(i){ <br />
alert(i.info); <br />
} <br />
}) <br />
}, <br />
loading: function () { <br />
<br />
} <br />
}); <br />
} <br />
<br />
function UploadPic() { <br />
this.sw = 0; <br />
this.sh = 0; <br />
this.tw = 0; <br />
this.th = 0; <br />
this.scale = 0; <br />
this.maxWidth = 0; <br />
this.maxHeight = 0; <br />
this.maxSize = 0; <br />
this.fileSize = 0; <br />
this.fileDate = null; <br />
this.fileType = ''; <br />
this.fileName = ''; <br />
this.input = null; <br />
this.canvas = null; <br />
this.mime = {}; <br />
this.type = ''; <br />
this.callback = function () {}; <br />
this.loading = function () {}; <br />
} <br />
<br />
UploadPic.prototype.init = function (options) { <br />
this.maxWidth = options.maxWidth || 800; <br />
this.maxHeight = options.maxHeight || 600; <br />
this.maxSize = options.maxSize || 3 * 1024 * 1024; <br />
this.input = options.input; <br />
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'}; <br />
this.callback = options.callback || function () {}; <br />
this.loading = options.loading || function () {}; <br />
<br />
this._addEvent(); <br />
}; <br />
<br />
/** <br />
* @description 绑定事件 <br />
* @param {Object} elm 元素 <br />
* @param {Function} fn 绑定函数 <br />
*/ <br />
UploadPic.prototype._addEvent = function () { <br />
var _this = this; <br />
<br />
function tmpSelectFile(ev) { <br />
_this._handelSelectFile(ev); <br />
} <br />
<br />
this.input.addEventListener('change', tmpSelectFile, false); <br />
}; <br />
<br />
/** <br />
* @description 绑定事件 <br />
* @param {Object} elm 元素 <br />
* @param {Function} fn 绑定函数 <br />
*/ <br />
UploadPic.prototype._handelSelectFile = function (ev) { <br />
var file = ev.target.files[0]; <br />
<br />
this.type = file.type <br />
<br />
// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题） <br />
if (!this.type) { <br />
this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]]; <br />
} <br />
<br />
if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) { <br />
alert('选择的文件类型不是图片'); <br />
return; <br />
} <br />
<br />
if (file.size > this.maxSize) { <br />
alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M，请重新选择'); <br />
return; <br />
} <br />
<br />
this.fileName = file.name; <br />
this.fileSize = file.size; <br />
this.fileType = this.type; <br />
this.fileDate = file.lastModifiedDate; <br />
<br />
this._readImage(file); <br />
}; <br />
<br />
/** <br />
* @description 读取图片文件 <br />
* @param {Object} image 图片文件 <br />
*/ <br />
UploadPic.prototype._readImage = function (file) { <br />
var _this = this; <br />
<br />
function tmpCreateImage(uri) { <br />
_this._createImage(uri); <br />
} <br />
<br />
this.loading(); <br />
<br />
this._getURI(file, tmpCreateImage); <br />
}; <br />
<br />
/** <br />
* @description 通过文件获得URI <br />
* @param {Object} file 文件 <br />
* @param {Function} callback 回调函数，返回文件对应URI <br />
* return {Bool} 返回false <br />
*/ <br />
UploadPic.prototype._getURI = function (file, callback) { <br />
var reader = new FileReader(); <br />
var _this = this; <br />
<br />
function tmpLoad() { <br />
// 头不带图片格式，需填写格式 <br />
var re = /^data:base64,/; <br />
var ret = this.result + ''; <br />
<br />
if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,'); <br />
<br />
callback && callback(ret); <br />
} <br />
<br />
reader.onload = tmpLoad; <br />
<br />
reader.readAsDataURL(file); <br />
<br />
return false; <br />
}; <br />
<br />
/** <br />
* @description 创建图片 <br />
* @param {Object} image 图片文件 <br />
*/ <br />
UploadPic.prototype._createImage = function (uri) { <br />
var img = new Image(); <br />
var _this = this; <br />
<br />
function tmpLoad() { <br />
_this._drawImage(this); <br />
} <br />
<br />
img.onload = tmpLoad; <br />
<br />
img.src = uri; <br />
}; <br />
<br />
/** <br />
* @description 创建Canvas将图片画至其中，并获得压缩后的文件 <br />
* @param {Object} img 图片文件 <br />
* @param {Number} width 图片最大宽度 <br />
* @param {Number} height 图片最大高度 <br />
* @param {Function} callback 回调函数，参数为图片base64编码 <br />
* return {Object} 返回压缩后的图片 <br />
*/ <br />
UploadPic.prototype._drawImage = function (img, callback) { <br />
this.sw = img.width; <br />
this.sh = img.height; <br />
this.tw = img.width; <br />
this.th = img.height; <br />
<br />
this.scale = (this.tw / this.th).toFixed(2); <br />
<br />
if (this.sw > this.maxWidth) { <br />
this.sw = this.maxWidth; <br />
this.sh = Math.round(this.sw / this.scale); <br />
} <br />
<br />
if (this.sh > this.maxHeight) { <br />
this.sh = this.maxHeight; <br />
this.sw = Math.round(this.sh * this.scale); <br />
} <br />
<br />
this.canvas = document.createElement('canvas'); <br />
var ctx = this.canvas.getContext('2d'); <br />
<br />
this.canvas.width = this.sw; <br />
this.canvas.height = this.sh; <br />
<br />
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh); <br />
<br />
this.callback(this.canvas.toDataURL(this.type)); <br />
<br />
ctx.clearRect(0, 0, this.tw, this.th); <br />
this.canvas.width = 0; <br />
this.canvas.height = 0; <br />
this.canvas = null; <br />
}; <br />
</script> <br>
<br>
这个也是把图片转成了base64去传送，个人不建议去用js改变图片的大小，建议裁切缩放还是PHP来做吧。this.maxWidth = options.maxWidth || 800; <br>
this.maxHeight = options.maxHeight || 600; <br>
this.maxSize = options.maxSize || 3 * 1024 * 1024; <br>
this.input = options.input; <br>
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};这一部分是对上传图片的配置，应该可以看懂，可以自己去改$.ajax({ <br>
url:"{:U('upload')}", <br>
data:{str:base64,type:this.fileType}, <br>
type:'post', <br>
dataType:'json', <br>
success:function(i){ <br>
alert(i.info); <br>
}这部分是上传以后ajax发送base64码到php,
base64码带有图片的说明字符串，所以得用正则去掉，然后base64解码保存到图片的文件中。并且返回地址即可
QQ交流群：252799167
原文出处：http://blog.phpue.com/Article/index/id/16.html
AD：真正免费，域名+虚机+企业邮箱=0元