移动端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,如需转载请自行联系原作者
目录
相关文章
|
24天前
|
搜索推荐 Android开发 iOS开发
安卓与iOS系统的用户界面设计对比分析
本文通过对安卓和iOS两大操作系统的用户界面设计进行对比分析,探讨它们在设计理念、交互方式、视觉风格等方面的差异及各自特点,旨在帮助读者更好地理解和评估不同系统的用户体验。
18 1
|
27天前
|
JSON JavaScript 安全
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
23 1
|
2月前
|
物联网 vr&ar Android开发
探索安卓与iOS操作系统的未来发展趋势
【2月更文挑战第9天】本文将深入探讨安卓与iOS操作系统的未来发展趋势。通过分析当前技术发展和市场趋势,我们将探讨移动操作系统在人工智能、虚拟现实、物联网等领域的应用前景,以及如何满足用户需求并提升用户体验。同时,我们还将着重讨论两大操作系统在隐私保护、系统优化和生态建设方面的不断改进。
24 4
|
2月前
|
搜索推荐 Android开发 iOS开发
探析安卓与iOS系统的优劣
【2月更文挑战第7天】安卓与iOS是当今手机市场上最主流的两款操作系统,各有优劣。本文将从用户体验、开放程度、生态系统等方面对两者进行深入探析,以期帮助读者更好地了解它们的特点。
|
10天前
|
存储 缓存 iOS开发
基于iOS的高效图片缓存策略实现
【4月更文挑战第9天】在移动应用开发中,图片资源的加载与缓存是影响用户体验的重要因素之一。特别是对于iOS平台,合理设计图片缓存策略不仅能够提升用户浏览图片时的流畅度,还能有效降低应用程序的内存压力。本文将介绍一种针对iOS环境优化的图片缓存技术,该技术通过多级缓存机制和内存管理策略,实现了图片快速加载与低内存消耗的目标。我们将从系统架构、关键技术细节以及性能评估等方面展开讨论,为开发者提供一套实用的图片缓存解决方案。
15 0
|
15天前
|
存储 缓存 iOS开发
实现iOS平台的高效图片缓存策略
【4月更文挑战第4天】在移动应用开发中,图片资源的加载与缓存是影响用户体验的关键因素之一。尤其对于iOS平台,由于设备存储和内存资源的限制,设计一个高效的图片缓存机制尤为重要。本文将深入探讨在iOS环境下,如何通过技术手段实现图片的高效加载与缓存,包括内存缓存、磁盘缓存以及网络层面的优化,旨在为用户提供流畅且稳定的图片浏览体验。
|
22天前
|
搜索推荐 Android开发 iOS开发
安卓与iOS操作系统的发展与比较
在移动互联网时代,安卓和iOS两大操作系统在智能手机市场竞争激烈。本文将从技术架构、生态系统、用户体验等方面对安卓和iOS进行比较分析,探讨它们各自的特点和发展趋势。
|
1月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
47 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
1月前
|
人工智能 算法 Android开发
探索未来:Android与iOS在人工智能时代的融合与创新
【2月更文挑战第13天】 在数字化时代的快速发展下,Android与iOS作为两大主流移动操作系统,它们在人工智能(AI)领域的融合与创新已成为推动科技进步的关键力量。本文将从操作系统的核心功能拓展、AI技术的集成应用,以及开发者生态系统的演变三个维度,深入探讨Android和iOS如何在AI时代实现协同发展,以及这一进程对用户体验、应用开发和行业趋势产生的深远影响。通过对比分析和案例研究,我们旨在揭示两大平台在AI驱动下的创新路径,及其对未来科技格局的塑造作用。
|
1月前
|
人工智能 自然语言处理 语音技术
探索未来:安卓与iOS在人工智能领域的竞争与合作
【2月更文挑战第12天】本文深入探讨了安卓和iOS两大操作系统在人工智能(AI)领域的发展现状、竞争态势及未来合作可能性。通过对比分析两系统在AI技术集成、开发者支持、用户体验优化等方面的表现,揭示了它们各自的优势与挑战。文章最终展望了一个既有竞争又充满合作的未来,认为安卓和iOS的共同进步将推动整个人工智能技术向前发展,为用户带来更加智能、便捷的生活体验。