开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!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来做吧。

1
2
3
4
5
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'};

这一部分是对上传图片的配置,应该可以看懂,可以自己去改

1
2
3
4
5
6
7
8
$.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的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$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);









本文转自 3147972 51CTO博客,原文链接:http://blog.51cto.com/a3147972/1554698,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS开发 -- 在Xcode中引入cpp文件,并调用cpp文件中的方法
iOS开发 -- 在Xcode中引入cpp文件,并调用cpp文件中的方法
0 0
iOS开发-本地推送实现方法和数据处理方案(二)
iOS开发-本地推送实现方法和数据处理方案(二)
0 0
iOS开发-本地推送实现方法和数据处理方案(一)
iOS开发-本地推送实现方法和数据处理方案(一)
0 0
weex在iOS环境加载本地图片的方法
weex在iOS环境加载本地图片的方法
0 0
iOS开发 -UISearchController的使用和改善方法
iOS开发 -UISearchController的使用和改善方法
0 0
iOS - 重写set和get方法后,为什么使用时会发生无效?解析命名规范
iOS - 重写set和get方法后,为什么使用时会发生无效?解析命名规范
0 0
IOS-发起微信支付方法
IOS-发起微信支付方法
0 0
iOS开发:实现点击常用控件弹出地区选择框(万能方法)
在iOS开发中会遇到一些选择选项的需求,而且点击一个控件弹出一个选择框,选择之后展示到前端,然后再把选择的内容传给后台或者做本地存储。这个需求对于大多数开发者来说可以为小儿科,但是作为一个爱记录的程序猿来说相当可贵,所以还是那句话,只分享给有缘人,大牛可以飘过,不喜勿喷请走开。
0 0
iOS开发:设置UICollectionView不同大小的item的方法
在iOS开发过程中,UICollectionView的使用作为iOS开发者来说都不陌生,但是要想完美的玩转UICollectionView的所有使用的技巧,还是需要了解很多的。本篇博文来分享一下关于UICollectionView设置不同大小item的方法,为的是迎合产品的需求,方便记录为了以后查看使用,分享给有需要的人。
0 0
iOS开发:用XIB拖控件关联时报错:“Could not insert new outlet connection…”解决方法
在iOS开发过程中,尤其是iOS开发初期,会遇到各种各样的错误,有些错误是开发者的不熟悉或者疏忽大意造成的,还有些是无厘头的错误,可以通过重启Xcode或者重启电脑就可解决。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Facebook iOS App技术演化十年之路
立即下载
From Java_Android to Swift iOS
立即下载
深入剖析 iOS 性能优化
立即下载