移动端html5图片上传方法【更好的兼容安卓IOS和微信】
之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了。
复制代码
这个也是把图片转成了base64去传送,个人不建议去用js改变图片的大小,建议裁切缩放还是PHP来做吧。
复制代码
这一部分是对上传图片的配置,应该可以看懂,可以自己去改
复制代码
这部分是上传以后ajax发送base64码到php,
base64码带有图片的说明字符串,所以得用正则去掉,然后base64解码保存到图片的文件中。并且返回地址即可
-
<!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解码保存到图片的文件中。并且返回地址即可