移动端普及的时代，流量是用户最关心的，手机拍出来的照片基本上都在1~2M以上，这样上传会非常耗流量，影响用户体验，此例能在保证清晰度的情况下，将4.5M的图片压缩为30K

 <!DOCTYPE html>

 <html>

 <head>

 <title>HTML5上传图片预览</title>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>

 <script src="dist/lrz.bundle.js" type="text/javascript"></script>

 </head>

 <body>

 <h3>请选择图片文件：JPG/GIF</h3>

 <input  type="file"  id="payfile" name="myfile"  onchange="fileChange(this)" />

 </form>

 <script>

 function fileChange(that){

     var path =$("#ctx").val();

     var filepath=$(that).val();

     if(filepath==""){

         return;

     }

     var extStart=filepath.lastIndexOf(".");

     var ext=filepath.substring(extStart,filepath.length).toUpperCase();

     if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){

        alert("只允许上传jpg、png、bmp、jpeg格式的图片");

         return false;

     }

      //以图片宽度为800进行压缩

     lrz(that.files[0],{

          width: 800

     })

     .then(function (rst){

             //压缩后异步上传

             $.ajax({

                 url : "http://192.168.1.168/storage/pages/AnJuKe/up.htm",

                 type: "POST",

                 data : {

                     imgdata:rst.base64//压缩后的base值

                 },

                 dataType:"json",

                 cache:false,

                 async:false,

                 success : function(data) {

                     if(data.success){

                             alert(data.message);///data.message为上传成功后的文件路径

                     }else{

                             alert(data.message);///data.message为上传失败原因

                     }

                 },

                 error:function(){

                     alert("上传失败");

                 }

             });

     });

 }

 </script>

 </body>

 </html>

Demo.html

 /**

      * 文件上传

      * @throws IOException

      */

     public ModelAndView up(HttpServletRequest request,HttpServletResponse response) throws IOException {

         String imgdata = request.getParameter("imgdata");

         FileOutputStream outputStream=null;

         try {

             String basePath = request.getRealPath("/upload");

             String imgPath=basePath+"/test1.jpg";

             // new一个文件对象用来保存图片

             File imageFile = new File(imgPath);

             // 创建输出流

             outputStream = new FileOutputStream(imageFile);

             // 获得图片文件流

             byte[] result = Base64.decodeBase64(imgdata.split(",")[1].getBytes());//解码

             for (int i = 0; i < result.length; ++i) {

                 if (result[i] < 0) {// 调整异常数据

                 result[i] += 256;

             }

         }

             outputStream.write(result);

         } catch (Exception e) {

         }finally{

             outputStream.flush();

             outputStream.close();

         }

         return null;

     }

java Code

js下载

需要jar

commons-codec-1.10.jar

异步上传&预览图片-压缩图片的更多相关文章

  1. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  2. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  3. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  6. 图片上传预览转压缩并转base64详解（dShowImg64.js）

    hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...

  7. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

随机推荐

  1. 04 Python之while循环/格式化输出/运算符/编码

    1. while循环 while 条件: 循环体(break,continue) else: 循环体(break,continue) break:彻底干掉一个循环,直接跳出. continue:停止当 ...

  2. 物联网的语言c,python,go等

    日本生鱼片 电热水器的使用方法http://www.hiry.cn/b/mt/33959.html 物联网层次很多,首先要看你从事哪个层级的工作了.既然你问语言,那么肯定是开发类的工作,开发类的对象中 ...

  3. linux CUDA安装

    首先是安装依赖库 sudo apt-get install freeglut3-dev build-essential libx11-dev libxmu-dev libxi-dev libgl1-m ...

  4. oracle 使用问题

    12541: 典型的listener.ora 文件内容: SID_LIST_LISTENER =   (注册到监听器的service name所在区域)  (SID_LIST =    (SID_DE ...

  5. verilog分频模块设计

    verilog设计: 分频器的设计: 分频器就是将一个时钟源的频率降低的过程(可以通过观察分频之后周期中包含几个原时钟周期来看是几分频),分频分为基数分频也分为偶数分频, 偶数分频的代码如下:(其中就 ...

  6. 抄来的，占个位儿【百度架构师是怎样搭建MySQL分布式集群】

    1.准备集群搭建环境 使用6台虚拟机来搭建MySQL分布式集群,相应的实验环境与对应的MySQL节点之间的对应关系如下图所示:     管理节点(MGM):这类节点的作用是管理MySQLCluster ...

  7. 清除zencart分类页多页后面的&disp_order &sort字符串的方法

    在includes\classes\split_page_results.php页面中的function display_links()函数第一行添加如下两行代码即可$parameters=preg_ ...

  8. 【hdu 6071】Lazy Running

    菜鸡永远都在做着变聚的梦. 题意 有 \(4\) 个点连成一个环,连接顺序依次为 \(1-2-3-4-1\).相邻两个点之间有个距离 \(d_{i,i+1}\)(特别地,当 \(i=4\) 时为 \( ...

  9. 多线程(二)Object类方法、线程的操作sleep()，join()，interrupt()，yield()

    四.Object类简介 Object类是所有类的超类,之所以放在线程部分是因为其方法很多是和线程有关的.比如以下三个: wait()方法.wait(long timeout)和wait(long ti ...

  10. C# 跨窗体事件

    跨窗体事件:例如从一个窗体改变另一个窗体button的颜色,首先需要将需要改变button的属性改为public using System; using System.Drawing; using S ...