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