最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过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. android-EditText 更改外边框无效

    修改的代码如下 <com.android.mms.ui.EnhanceEditText android:textColor="#000000" <!--问题处在这里,a ...

  2. Maven学习笔记5

    Web项目的部署: web部署 配置步骤 生成项目方式不是quickstart,而是webapp. 默认目录结构,需要修改配置. 重新配置project facets和java compiler.并重 ...

  3. BZOJ2119: 股市的预测（后缀数组）

    Description 墨墨的妈妈热爱炒股,她要求墨墨为她编写一个软件,预测某只股票未来的走势.股票折线图是研究股票的必备工 具,它通过一张时间与股票的价位的函数图像清晰地展示了股票的走势情况.经过长 ...

  4. LAN8720A网络模块的使用问题

    一.LAN8720A模块驱动电路 最近在调试STM32F4驱动LAN8720A网络模块,在做方案前参考是正点原子的LAN8720A的驱动电路方案,但是从网上买回来的LAN8720A模块用正点原子的例程 ...

  5. vector转数组

    vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...

  6. 2lession-文件访问

    今天继续学习python,因为是根据网上的教程,里面用到了一些例子,包含有后面的知识点.但是,因为自己稍微有点c.java等语言基础,所以并没有严格按照教程来学习,反而是遇到知识点就记录下来. 代码如 ...

  7. 【Educational Codeforces Round 33 A】Chess For Three

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...

  8. php字符串函数分类总结

    php字符串函数分类总结 一.总结 explode  str_split  str_word_count  strtolower 二.php字符串函数分类总结 php内置了98个字符串函数(除了基于正 ...

  9. GCJ 2009 Round 2 Problem A. Crazy Rows

    https://code.google.com/codejam/contest/204113/dashboard 题目大意: 给你一个矩阵,让你转化为下三角矩阵,每次只能交换相邻的行,求最小的交换次数 ...

  10. Python 极简教程（二）编码工具

    Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...