移动端web无刷新上传图片【兼容安卓IOS】 推荐
2014-09-11 11:41
483 查看
博客已转移到:PHP博客
简单说明:width是生成的图片的宽度,个人修改里,如果指定width为1,则为原图宽度
quality是图片的质量
success:生成成功以后是base64码,在success里可以用ajax发送到服务器端保存,base64会生成两种:一种是带前缀说明图片类型的base64码,可以直接放到img标签里使用,调用方法:result.base64 还有一种是result.clearBase64,不带说明的,读取方法:result.clearBase64。
服务器端代码:
其他说明:安卓下有些可以调用相册,文件管理器和摄像头,有些只能调用相册和文件管理器
IOS可调用相册和摄像头。
PC端无限制
无论上传什么图片,最后都会变成jpeg的格式。
欢迎加群: 252799167 感谢@南宁-柿子
需求 | 手机端网页或者微信无刷新上传头像 |
环境 | 手机浏览器或者微信浏览器(支持HTML5) |
实现方式 | LocalResizeIMG |
地址 | https://github.com/think2011/LocalResizeIMG(原版地址) 链接: http://pan.baidu.com/s/1ntNYXrb 密码: 71cp(个人修改版) |
说明 | 原版只能指定固定的图片宽度,而修改版扩展原图片上传 |
使用方式 | <h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1> <hr/> <input type="file" /> <hr/> <!-- javascript ================================================== --> <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> <!-- mobileBUGFix.js 兼容修复移动设备 --> <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> |
quality是图片的质量
success:生成成功以后是base64码,在success里可以用ajax发送到服务器端保存,base64会生成两种:一种是带前缀说明图片类型的base64码,可以直接放到img标签里使用,调用方法:result.base64 还有一种是result.clearBase64,不带说明的,读取方法:result.clearBase64。
服务器端代码:
$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的格式。
欢迎加群: 252799167 感谢@南宁-柿子
相关文章推荐
- 移动端图片上传方法【更好的兼容安卓IOS和微信】 推荐
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 移动端html5图片上传方法【更好的兼容安卓IOS和微信】
- 手机网页版JS压缩上传图片--base64位 兼容IOS和安卓
- h5上传图片完美兼容安卓ios
- 微信上传多张图片问题(兼容ios,安卓)
- web端移动端上传图片,兼容微信
- 微信页面上传图片,安卓和ios上传接口的兼容处理
- 上传图片兼容ios和安卓
- 微信开发上传图片ios与安卓兼容问题
- 移动端Web上传图片实践
- webview中input file伪造无刷新上传(兼容Android和IOS)
- 移动端Web上传图片实践
- 移动端web开发之坑--IOS8下 上传图片点击取消后,弹出了软键盘遮挡输入框
- 安卓、IOS-web调用摄像头/本地文件夹以base64压缩图片传递给服务器并还原为图片
- 从UIWebView中调用iOS相册,并选择图片上传到Linux Web服务器。
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
- 上传本地图片兼容苹果安卓
- IOS web网页图片上传问题