博客已转移到:PHP博客
| 需求 |
手机端网页或者微信无刷新上传头像 |
| 环境 |
手机浏览器或者微信浏览器(支持HTML5) |
| 实现方式 |
LocalResizeIMG |
| 地址 |
https://github.com/think2011/LocalResizeIMG(原版地址) 链接: http://pan.baidu.com/s/1ntNYXrb 密码: 71cp(个人修改版) |
| 说明 |
原版只能指定固定的图片宽度,而修改版扩展原图片上传 |
| 使用方式 |
|
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
|
<
h1
class
=
"text-center"
>LocalResizeIMG-本地压缩 1.0</
h1
>
<
hr
/>
<
input
type
=
"file"
/>
<
hr
/>
<
script
src
=
"http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"localResizeIMG.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"patch/mobileBUGFix.mini.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
$('input:file').localResizeIMG({
width: 100,
quality: 0.1,
success: function (result) {
var img = new Image();
img.src = result.base64;
$('body').append(img);
console.log(result);
}
});
</
script
>
|
|
简单说明:width是生成的图片的宽度,个人修改里,如果指定width为1,则为原图宽度
quality是图片的质量
success:生成成功以后是base64码,在success里可以用ajax发送到服务器端保存,base64会生成两种:一种是带前缀说明图片类型的base64码,可以直接放到img标签里使用,调用方法:result.base64 还有一种是result.clearBase64,不带说明的,读取方法:result.clearBase64。
服务器端代码:
|
1
2
3
4
5
6
7
|
$path
=
'./Uploads/'
.
date
(
'Ymd'
).
'/'
;
if
(!
file_exists
(
$path
)){
mkdir
(
$path
);
}
$file
=
$path
.time().
'.jpeg'
;
$base64
=
base64_decode
(
$_POST
[
'head'
]);
file_put_contents
(
$file
,
$base64
)
|
其他说明:安卓下有些可以调用相册,文件管理器和摄像头,有些只能调用相册和文件管理器
IOS可调用相册和摄像头。
PC端无限制
无论上传什么图片,最后都会变成jpeg的格式。
本文转自 3147972 51CTO博客,原文链接:http://blog.51cto.com/a3147972/1551066,如需转载请自行联系原作者