移动端web无刷新上传图片【兼容安卓IOS】

简介:

博客已转移到: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 />
 
     <!-- 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 >


简单说明: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,如需转载请自行联系原作者
目录
相关文章
|
21小时前
|
安全 开发工具 Android开发
安卓与iOS系统的优缺点比较
【2月更文挑战第6天】 安卓和iOS是目前市场上最流行的两种操作系统。虽然它们都拥有自己的独特之处,但它们也有一些共同之处。本文将探讨这两种操作系统的优缺点,并对它们进行比较。
|
21小时前
|
Android开发 数据安全/隐私保护 iOS开发
安卓与iOS系统的发展趋势与比较分析
【2月更文挑战第6天】 在移动互联网时代,安卓和iOS系统作为两大主流移动操作系统,各自呈现出不同的发展趋势。本文将从技术角度出发,对安卓和iOS系统的发展方向、特点及未来趋势进行比较分析,以期为读者提供更深入的了解和思考。
|
2天前
|
安全 搜索推荐 Android开发
Android 与 iOS 的比较分析
【2月更文挑战第5天】 Android 和 iOS 是目前市场上两种最流行的移动操作系统,它们都拥有自己的特点和优势。本文将会分别从操作系统设计、应用生态、安全性等方面对这两种操作系统进行比较和分析,希望能够帮助读者更好地选择适合自己的移动设备。
|
2天前
|
搜索推荐 Android开发 iOS开发
安卓和iOS:探索两大移动操作系统的差异与共通
【2月更文挑战第5天】移动操作系统是现代科技领域中最重要的组成部分之一。本文将深入探讨安卓和iOS这两大主流移动操作系统的差异与共通。通过对它们的核心特性、用户界面设计、应用生态系统以及开发者支持等方面的比较,我们可以更好地了解它们在技术上的优势和适用场景,为读者提供参考和决策依据。
|
3天前
|
人工智能 自然语言处理 Android开发
安卓与iOS操作系统的发展趋势与比较
【2月更文挑战第4天】 在移动互联网时代,安卓和iOS操作系统作为两大主流操作系统一直备受关注。本文将对安卓和iOS操作系统的发展趋势进行分析,并对它们进行比较,探讨它们在技术上的优劣势和未来发展方向。
7 1
|
5天前
|
开发框架 前端开发 JavaScript
从前端到后端——完整的Web开发指南
【2月更文挑战第1天】Web开发已经成为了现代软件开发中不可或缺的一部分。无论是前端还是后端,都扮演着重要的角色。本文将从前端到后端,介绍完整的Web开发流程和技术栈,帮助初学者快速入门Web开发。
|
4天前
|
设计模式 存储 前端开发
Java Web开发中MVC设计模式的实现与解析
Java Web开发中MVC设计模式的实现与解析
|
4天前
|
Java Maven 开发者
深入剖析Spring Boot在Java Web开发中的优势与应用
深入剖析Spring Boot在Java Web开发中的优势与应用
|
4天前
|
JSON 监控 Java
Java Web开发中的异常处理与日志记录最佳实践
Java Web开发中的异常处理与日志记录最佳实践
|
4天前
|
缓存 前端开发 安全
前后端分离架构下Java Web开发的挑战与解决方案
前后端分离架构下Java Web开发的挑战与解决方案

相关产品

  • 云迁移中心