文档章节

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

zhoumeng780
 zhoumeng780
发布于 2016/10/26 15:59
字数 548
阅读 119
收藏 0

处理过程

  1. LocalResizeIMG压缩图片
  2. AjaxPost图片base64到后台
  3. 后台接收base64并保存,返回状态

前台代码

     重点,引用LocalResizeIMG.js(插件主体)及mobileBUGFix.mini.js(移动端的补丁)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传</title>
  6. <meta name="description" content="" />
  7. <meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
  8. <script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
  9. <script type='text/javascript' src='js/LocalResizeIMG.js'></script>
  10. <script type='text/javascript' src='js/patch/mobileBUGFix.mini.js'></script>
  11. <style type="text/css">
  12. body{font-family:"微软雅黑"}
  13. .uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }
  14. .imglist{min-height:200px;margin:10px;}
  15. .imglist img{width:100%;}
  16. </style>
  17. </head>
  18. <body>
  19. <div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
  20. <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
  21. <div class="imglist"></div>
  22. <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
  23. </div>
  24. <div style="text-align:center;margin-top:50px;">@ <a href="http://www.devdo.net/">码农小兵,专注web开发 欢迎投稿</a></div>
  25. </body>
  26. </html>

Js部份,localResizeIMG及Ajax提交部份

localResizeIMG参数:

  • width:缩略图宽度
  • quality:图片质量,0—1,越大越好

localResizeIMG返回值

  • result.base64:带图片类型的base64编码,可直接用于img标签的src,如“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”;
  • result.clearBase64:不带图片类型的编码,如“/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”
  1. $(document).ready(function(e) {
  2. $('#uploadphoto').localResizeIMG({
  3. width: 400,
  4. quality: 1,
  5. success: function (result) {
  6. var submitData={
  7. base64_string:result.clearBase64,
  8. };
  9. $.ajax({
  10. type: "POST",
  11. url: "upload.php",
  12. data: submitData,
  13. dataType:"json",
  14. success: function(data){
  15. if (0 == data.status) {
  16. alert(data.content);
  17. return false;
  18. }else{
  19. alert(data.content);
  20. var attstr= '<img src="'+data.url+'" alt="" />';
  21. $(".imglist").append(attstr);
  22. }
  23. },
  24. complete :function(XMLHttpRequest, textStatus){
  25. },
  26. error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
  27. alert(XMLHttpRequest.status);
  28. alert(XMLHttpRequest.readyState);
  29. alert(textStatus);
  30. }
  31. });
  32. }
  33. });
  34.  
  35. });

保存文件

在上面一步中,我们把result.clearBase64通过Ajax传入到upload.php中,接下来我们就要在upload.php中接收base64参数,把它转换成img文件保存来服务器中,并给出提示。

 
  1. $base64_string = $_POST['base64_string'];
  2.  
  3. $savename = uniqid().'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式
  4.  
  5. $savepath = 'images/'.$savename;
  6. $claerBase64 = explode(',', $base64_string);
  7. $image = base64_to_img( $claerBase64[1], $savepath );
  8.  
  9. if($image){
  10. echo '{"status":1,"content":"上传成功","url":"'.$image.'"}';
  11. }else{
  12. echo '{"status":0,"content":"上传失败"}';
  13. }
  14.  
  15. function base64_to_img( $base64_string, $output_file ) {
  16. $ifp = fopen( $output_file, "wb" );
  17. fwrite( $ifp, base64_decode( $base64_string) );
  18. fclose( $ifp );
  19. return( $output_file );
  20. }

下载DEMO:http://pan.baidu.com/s/1eR2KjTK

© 著作权归作者所有

zhoumeng780
粉丝 2
博文 19
码字总数 8770
作品 0
深圳
私信 提问
h5前端图片压缩直传到OSS,压缩用localResizeIMG插件

前段时间参与了一个H5项目,里边有个需求是用户上传图片。当时的方案是前端先调用微信的JSSDK选择图片并上传,然后再从后端下载到服务器上。然而用的时候发现客户端给的图片有大有小,但是由...

keller.zhou
2018/03/13
0
0
JS异步上传压缩图片,并立即显示图片。

感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面: <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=de......

zerodeng
2015/11/05
13.8K
0
移动端web无刷新上传图片【兼容安卓IOS】

博客已转移到:PHP博客

3147972
2014/09/11
0
0
JavaScript:利用JavaScript实现的功能、算法和奇淫技巧(持续更新)

1、JavaScript:输入日期获得从该日期开始的一个月时间 3、JavaScript:使对话框的滚动条一直处于最下方 .chatting-middle(对话框部分) 4、JavaScript:如何删除数组中指定的一项 将上面的代...

docallen
2017/05/02
0
0
H5拍照应用开发经历的那些坑儿

一、项目简介 1.1、项目背景: 这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮。 1.2、系统...

我是李达康
2015/03/31
9K
0

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
47分钟前
3
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
124
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部