如何预览图片并压缩上传

如何压缩后上传大文件

学生写的，贴在这里

实现思路

1.可以预览图片
2.可以上传图片到服务器
3.点击删除图片

技术关键点

1.weui框架修饰
2.html 5后可以读取用户选中的文件（预览图片）
3.on change事件来规定选中的图片
4.使用canves和回调函数来实现压缩预览图片
5.通过blob方法实现上传图片到控制器
6.在控制器中把图片保存

实现流程

weui调用 type=”file” 的方法来实现上传文件

选中新文件的处理：页面加载成功后自动调用方法

    // 允许上传的图片类型，定义的数组  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 文件最大 1MB  
    var maxSize = 1024 * 1024;
    // 图片最大宽度  
    var maxWidth = 300;
    // 最大上传图片数量  
    var maxCount = 6;

点击之后触发on change事件

$('.js_file').on('change', function(event) {
    var files = event.target.files;

    // 如果没有选中文件，直接返回  
    if (files.length === 0) {
        return;
    }

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        var reader = new FileReader();

        // 如果类型不在允许的类型范围内  
        if (allowTypes.indexOf(file.type) === -1) {
            $.weui.alert({
                text: '该类型不允许上传'
            });
            continue;
        }
        // 如果图片超过预设最大大小，弹出警示框
        if (file.size > maxSize) {
            $.weui.alert({
                text: '图片太大，不允许上传'
            });
            continue;
        }
        // 上传图片数量超过预设数量，弹出警示框
        if ($('.weui_uploader_file').length >= maxCount) {
            $.weui.alert({
                text: '最多只能上传' + maxCount + '张图片'
            });
            return;
        }

对用户选中的图片进行压缩处理，做出预览，并上传到服务器

       // 定义reader，用来读取用户选中的文件
       var reader = new FileReader();
       //读取成功之后，回调图片内容
       reader.onload = function(e) {
       //创建一个空白的图片
        var img = new Image();
       //加载成功后的回调函数
        img.onload = function() {
            // 不要超出最大宽度，和图片比找出宽度最小值  
            var w = Math.min(maxWidth, img.width);
            // 高度按比例计算，保证等比例缩放 
            var h = img.height * (w / img.width);
            //创建一个canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 设置 canvas 的宽度和高度(上面算出的) 
            canvas.width = w;
            canvas.height = h;
            //把缩放的预览图片画到空白img里
            ctx.drawImage(img, 0, 0, w, h);
            //把图片变成一个base64的数据，Base64就是一种基于64个可打印字符来表示二进制数据的方法
            var base64 = canvas.toDataURL('image/png');


            //上传图片！！！
            //toBlob 把图片变成一个blob对象；function是个回调函数
            canvas.toBlob(function (blob) {
                //alert("blob is created");
               // 图片ajax上传，创建了一个异步对象（XMLHttpRequest）
              var xhr = new XMLHttpRequest();
               // 创建formdata表单数据 
                var fd = new FormData(); 
               //fileData为自定义，数据传给数据本身 
                fd.append("fileData", blob);  
               //数据传给文件名
                fd.append("fileName", "haha.jpg");
              // 开始上传，通过post传到控制器里
              xhr.open("POST", 'http://127.0.0.1:8080/uploadimg', true);
              xhr.send(fd);    
            });

            // 插入到预览区  
                    //创建一个动态的li节点
                    //给onclink加一个删除图片的效果
                    var $preview = $('<li onclick="removeImg(this)" class="weui_uploader_file weui_uploader_status" 
                    //用css方法background-image加图片的base64编码显示
                    style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                    //把图片加到上传图片的文件列表中
                    $('.weui_uploader_files').append($preview);
                    //把图片大小显示出来
                    var num = $('.weui_uploader_file').length;
                    $('.js_counter').text(num + '/' + maxCount);

                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  

                    var progress = 0;
                    //一个模拟上传，运用定时器，只有百分比显示的效果
                    function uploading() {
                        $preview.find('.weui_uploader_status_content').text(++progress + '%');
                        if (progress < 100) {
                            setTimeout(uploading, 2);
                        } else {
                            // 如果是失败，塞一个失败图标  
                            //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');  
                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                        }
                    }
                    setTimeout(uploading, 2);
                };
        //图片文件的内容给src，这样图片可以开始加载
                img.src = e.target.result;
            };

        //读取选中的文件
        reader.readAsDataURL(file);

在控制器中保存和修改图片文件名

   //上传图片
public void uploadimg(){
    header("Access-Control-Allow-Origin", "*");
    //输出blob数据
    output("haha is "+param("fileData"));
    //自动把数据存入一个文件里
    String realpath = application.getRealPath(param("fileData"));
    File f = new File(realpath);
    //把文件后缀名.null改为.jpg
    f.renameTo(new File(realpath.replace("null", "jpg")));
}

下面是完整的源代码。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>weui uploader上传-jq22.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<style>
</style>
</head>
<body>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css">
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<div class="container">
    <div class="weui_cells_title">上传</div>
    <div class="weui_cells weui_cells_form">
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <div class="weui_uploader">
            <div class="weui_uploader_hd weui_cell">
              <div class="weui_cell_bd weui_cell_primary">图片上传</div>
              <div class="weui_cell_ft js_counter">0/6</div>
            </div>
            <div class="weui_uploader_bd">
              <ul class="weui_uploader_files">
                <!-- 预览图插入到这 --> </ul>
              <div class="weui_uploader_input_wrp">
                <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="weui_dialog_alert" style="display: none;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
      <div class="weui_dialog_hd"> <strong class="weui_dialog_title">警告</strong>
      </div>
      <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
      <div class="weui_dialog_ft">
        <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
      </div>
    </div>
  </div>

<script>
$.weui = {};
$.weui.alert = function(options) {
    options = $.extend({
        title: '警告',
        text: '警告内容'
    }, options);
    var $alert = $('.weui_dialog_alert');
    $alert.find('.weui_dialog_title').text(options.title);
    $alert.find('.weui_dialog_bd').text(options.text);
    $alert.on('touchend click', '.weui_btn_dialog', function() {
        $alert.hide();
    });
    $alert.show();
};

function removeImg(obj){

    $(obj).remove();

}

$(function() {
    // 允许上传的图片类型  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB  
    var maxSize = 1024 * 1024;
    // 图片最大宽度  
    var maxWidth = 300;
    // 最大上传图片数量  
    var maxCount = 6;
    $('.js_file').on('change', function(event) {
        var files = event.target.files;

        // 如果没有选中文件，直接返回  
        if (files.length === 0) {
            return;
        }

        for (var i = 0, len = files.length; i < len; i++) {
            var file = files[i];
            var reader = new FileReader();

            // 如果类型不在允许的类型范围内  
            if (allowTypes.indexOf(file.type) === -1) {
                $.weui.alert({
                    text: '该类型不允许上传'
                });
                continue;
            }

            if (file.size > maxSize) {
                $.weui.alert({
                    text: '图片太大，不允许上传'
                });
                continue;
            }

            if ($('.weui_uploader_file').length >= maxCount) {
                $.weui.alert({
                    text: '最多只能上传' + maxCount + '张图片'
                });
                return;
            }

            reader.onload = function(e) {
                var img = new Image();
                img.onload = function() {
                    // 不要超出最大宽度  
                    var w = Math.min(maxWidth, img.width);
                    // 高度按比例计算  
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 设置 canvas 的宽度和高度  
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    var base64 = canvas.toDataURL('image/png');

                    canvas.toBlob(function (blob) {
                        //alert("blob is created");
                      // // 图片ajax上传
                      var xhr = new XMLHttpRequest();
                        var fd = new FormData();  
                        fd.append("fileData", blob);//fileData为自定义  
                        fd.append("fileName", "haha.jpg");
                      // 开始上传
                      xhr.open("POST", 'http://127.0.0.1:8080/uploadimg', true);
                      xhr.send(fd);    
                    });

                    // 插入到预览区  
                    var $preview = $('<li onclick="removeImg(this)" class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                    $('.weui_uploader_files').append($preview);
                    var num = $('.weui_uploader_file').length;
                    $('.js_counter').text(num + '/' + maxCount);

                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  

                    var progress = 0;

                    function uploading() {
                        $preview.find('.weui_uploader_status_content').text(++progress + '%');
                        if (progress < 100) {
                            setTimeout(uploading, 2);
                        } else {
                            // 如果是失败，塞一个失败图标  
                            //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');  
                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                        }
                    }
                    setTimeout(uploading, 2);
                };

                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>

</body>
</html>

public void uploadimg(){
    header("Access-Control-Allow-Origin", "*");
    output("haha is "+param("fileData"));
    String realpath = application.getRealPath(param("fileData"));
    File f = new File(realpath);
    f.renameTo(new File(realpath.replace("null", "jpg")));
}