移动端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,如需转载请自行联系原作者
目录
相关文章
|
1月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
24天前
|
Java 开发工具 Android开发
安卓与iOS开发环境对比分析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文深入探讨了这两个平台的开发环境,从编程语言、开发工具到用户界面设计等多个角度进行比较。通过实际案例分析和代码示例,我们旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和个人偏好做出明智的选择。无论你是初涉移动开发领域的新手,还是寻求跨平台解决方案的资深开发者,这篇文章都将为你提供宝贵的信息和启示。
29 8
|
20天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
24天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
1月前
|
开发框架 Dart Android开发
安卓与iOS的跨平台开发:Flutter框架深度解析
在移动应用开发的海洋中,Flutter作为一艘灵活的帆船,正引领着开发者们驶向跨平台开发的新纪元。本文将揭开Flutter神秘的面纱,从其架构到核心特性,再到实际应用案例,我们将一同探索这个由谷歌打造的开源UI工具包如何让安卓与iOS应用开发变得更加高效而统一。你将看到,借助Flutter,打造精美、高性能的应用不再是难题,而是变成了一场创造性的旅程。
|
JSON 前端开发 Java
Java WEB 与 android | 学习笔记
快速学习 Java WEB 与 android。
106 0
Java WEB 与 android | 学习笔记
|
JSON 前端开发 Java
Java WEB 与 android | 学习笔记
快速学习 Java WEB 与 android。
342 0
Java WEB 与 android  | 学习笔记
|
JSON 前端开发 Java
Java WEB与android|学习笔记
快速学习Java WEB与android
Java WEB与android|学习笔记
|
20天前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
42 19
|
1月前
|
IDE Java 开发工具
移动应用与系统:探索Android开发之旅
在这篇文章中,我们将深入探讨Android开发的各个方面,从基础知识到高级技术。我们将通过代码示例和案例分析,帮助读者更好地理解和掌握Android开发。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。让我们一起开启Android开发的旅程吧!