最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过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. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

  2. git仓库搭建

    第一步安装git [root@Centos-node2 ~]# yum -y install git 第二步创建git用户 [root@Centos-node2 ~]# useradd git [ro ...

  3. 关于hadoop hdfs里文件为啥上一级大小是0，进去又有大小问题解释？

    问题 好像跟平时的理解不一样,外边是0,进去就是有大小了? 答:hdfs具体文件是针对具体文件的,不是文件目录.    文件夹大小为0,不是里面所有内容为0.

  4. Windows Forms 窗体篇

    1,显示窗体 非模式: Form form = new Form(); form.Show(); 模式: Form form = new Form(); form.Show(); 2,拥有者窗体与附属 ...

  5. 日志系统之基于Zookeeper的分布式协同设计

    近期这段时间在设计和实现日志系统.在整个日志系统系统中Zookeeper的作用非常重要--它用于协调各个分布式组件并提供必要的配置信息和元数据.这篇文章主要分享一下Zookeeper的使用场景. 这里 ...

  6. hunnu11550:欧拉函数

    Problem description   一个数x的欧拉函数Φ(x)定义为全部小于x的正整数中与x互质的数的数目,如小于5且和5互质的数有1.2.3.4,一共4个,故Φ(5)=4. 对于随意正整数x ...

  7. 如何在anaconda中切换python2

    如果你不切换可能是默认的python3环境. 下面是在python27版本下下载qt5

  8. 11.4 Android显示系统框架_APP与SurfaceFlinger内部机制分析

    4.1 APP跟SurfaceFlinger之间的重要数据结构 一个应用程序有一个或者多个surface(一般只有一个),一个surface有一个或者多个buffer,这些buffer需要应用向sur ...

  9. StackExchange.Redis 官方文档(五) Keys, Values and Channels

    原文:StackExchange.Redis 官方文档(五) Keys, Values and Channels Keys, Values and Channels 在使用redis的过程中,要注意到 ...

  10. JAVA一些基础概念

    Java (计算机编程语言) Java是一门面向对象编程语言,不仅吸收了C++语言的各种长处,还摒弃了C++里难以理解的多继承.指针等概念.因此Java语言具有功能强大和简单易用两个特征. Java语 ...