最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过N久的折腾，找到一个插件，用法如下：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML>
<html lang="zh-CN">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no" /> 
<head>
    <meta charset="UTF-8">
    <title>LocalResizeIMG</title>
</head>
<style>
    body {
        margin: 20px 20%;
        color:#777;
        text-align: center;
    }
</style>
<body>
    <h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>
    <hr/>
    <input type="file" />
    <hr/>
 
    <!-- javascript
        ================================================== -->
    <script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>
     
    <!-- mobileBUGFix.js 兼容修复移动设备 -->
    <script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('input:file').localResizeIMG({
             width: 500,
             quality: 0.8,
             success: function (result) {
                 var img = new Image();
                 img.src = result.base64;
     
                 $('body').append(img);
                 //console.log(result);
                $.ajax({
                     url: './uploads.php',
                     type: 'POST',
                     data:{formFile:result.clearBase64},
                     dataType: 'HTML',
                     timeout: 1000,
                     error: function(){
                         alert('Error loading PHP document');
                    },
                     success: function(result){
                         //console.log(result);
                        alert("Uploads success~")
                    }
                 });
             }
         });
    </script>
</body>
</html>

PHP代码：

1
2
3
4
5
6
<?php
    $base64 = $_POST['formFile'];
    $IMG = base64_decode($base64);
    $path = './';
    file_put_contents($path.time().'.jpg',$IMG);
?>

在前端把图片压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在PHP解开Base64，写入到一个文件去。

原插件地址：http://github.com/think2011/LocalResizeIMG

然后发现我朋友也写有一篇这个插件的使用的文章，地址在这里：http://a3147972.blog.51cto.com/2366547/1551066

html5+js压缩图片上传的更多相关文章

  1. LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  2. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  3. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. 基于html5的多图片上传，预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  6. WebUploader压缩图片上传

    WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...

  7. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  8. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  9. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

随机推荐

  1. 关于结构体COORD介绍

    COORD是windows API中定义的一种结构,表示一个字符在控制台屏幕上的坐标.其定义为: typedef struct _COORD { SHORT X; // horizontal coor ...

  2. 关于EJB--实体Bean的BMP和CMP选择

    EJB有两种主要类型BMP(Bean managed persistence )和CMP(Container managed persistence ),这两种类型各有优缺点. BMP是在Bean中完 ...

  3. vue中判断路由变化

    使用from.path和to.path判断路由跳转 在methods里面写函数: 当然,上边函数里边可以做很多事情.

  4. 【Oracle错误集锦】：PLSQL无法直连64位Oracle11g数据库

    背景:Oracle数据库装在本机上,使用PLSQL连接. 今天安装完Oracle 11g数据库后.用plsql连接数据库死活都连接不上.而且plsql客户端登录窗体的Database下拉框还为空.见下 ...

  5. 基于Eclipse的Android JNI层測试应用开发过程记录

    前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...

  6. Rotation--控件位置旋转

    今天想要完成一个按钮的动画,也就是随着手势在屏幕上的滑动,让按钮图片跟着旋转.刚开始的思路是,先把图片旋转以后,在把这个图片设置为imagebutton的背景.不过,会发现这个图片经过处理以后一直变形 ...

  7. shell学习四十天----awk的惊人表现

    awk的惊人表现 awk能够胜任差点儿全部的文本处理工作.     awk 调用 1.调用awk: 方式一:命令行方式 awk [-F field-separator ] 'commands' inp ...

  8. WSDL文档框架

  9. C#使用GDAL读取与创建影像

    C#下GDAL的使用这里就不多赘述了.參见上一篇博客. 代码中都加了凝视,这里就不再一一叙述了.代码例如以下: class FloodSimulation { #region 类成员变量 public ...

  10. POJ 题目2823 Sliding Window（RMQ，固定区间长度）

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 46507   Accepted: 13442 ...