h5 端图片上传

1、upload.js

(function($) {
    $.extend($.fn, {
        images : new Array(),
        initImages:function (images) {
            $.each(images,function (index,value) {
                $(this).images.push(value);
                var $img = $('<div><div class="try-report-add thumb"><img class="dataImg" src='+ConstUtil.get("PIC_DOMAIN")+value+'></div>' +
                    '<img onclick="$(this).delImage(\''+value+'\',this)"  src="/pages/prod/activity/try/images/try-delete.png"></div>');
                $("#upImg").append($img);
            })
        },
        getImages: function () {
            return $(this).images;
        },
        delImage: function (url,e) {
            for(i in $(this).images){
                if(url == $(this).images[i]){
                    $(this).images.splice(i,1);
                }
            }
            $(e).parent().remove();
            $("#upload").show();
        },
        fileUpload: function(opts) {
            this.each(function() {
                var $self = $(this);
                var quality = opts.quality ? opts.quality / 50 : 0.5;
                var dom = {
                    "fileToUpload": $self.find(".fileToUpload"),
                    "thumb": $self.find(".thumb"),
                    "progress": $self.find(".upload-progress")
                };
                var funs = {
                    bindEvent: function() {
                        console.log(dom.fileToUpload)
                        // $self.click(function(){
                        //     dom.fileToUpload.click(function (event) {
                        //         event.stopPropagation();//防止事件冒泡
                        //     }).click();
                        // });
                        dom.fileToUpload.on("change", function() {
                            if($(this).images.length>=opts.maxNum){
                                alert("最多只能上传"+opts.maxNum+"图片");
                                return;
                            }
                            funs.fileSelect(this);
                        });
                    },
                    fileSelect: function(obj) {
                        for(var i=0;i<obj.files.length;i++) {
                            var file = obj.files[i];
                            var reader = new FileReader();
                            reader.onload = function () {
                                var image = new Image();
                                image.src = reader.result;
                                image.onload = function () {
                                    var wdh = Number(image.width)>Number(image.heihgt)? true : false;
                                    var data = funs.compress(this);
                                    funs.fileUpload(data, file.type,wdh);
                                };
                            };
                            reader.readAsDataURL(file);
                        }
                    },
                    fileUpload: function(data,type,wdh) {
                        if(type.indexOf('jpeg')>-1) type='image/jpg';
                        var text = window.atob(data.split(',')[1]);
                        var ia = new Uint8Array(text.length);
                        for (var i = 0; i < data.length; i++) {
                            ia[i] = text.charCodeAt(i);
                        };

                        var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
                        var blob;

                        if (Builder) {
                            var builder = new Builder();
                            builder.append(ia);
                            blob = builder.getBlob(type);
                        } else {
                            blob = new window.Blob([ia], {type: type});
                        }
                        var fd = new FormData();
                        fd.append(opts.file, blob);
                        var xhr = new XMLHttpRequest();
                        xhr.addEventListener("load", opts.success, false);
                        xhr.addEventListener("error", opts.error, false);
                        xhr.open("POST", opts.url);
                        xhr.send(fd);
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                var ret = JSON.parse(xhr.responseText);
                                console.log(ret);
                                console.log(ret.state);
                                if(ret.state=='SUCCESS'){
                                    var commentListLiHeight = Number((window.screen.width)*0.92*0.3).toFixed(1);
                                    if(wdh){
                                        var $img = $('<li class="li-img"><a style="height: '+commentListLiHeight+'px;" href="javascript:;"><img class="dataImg" onclick="CommentDetail.initSwiper(this)" style="width: 100%;" src='+ret.url+'></a>' +
                                            '<i class="icon-del" onclick="$(this).delImage(\''+ret.savepath+'\',this)"></i></li>');
                                    }else{
                                        var $img = $('<li class="li-img"><a style="height: '+commentListLiHeight+'px;" href="javascript:;"><img class="dataImg" onclick="CommentDetail.initSwiper(this)" style="height: 100%;" src='+ret.url+'></a>' +
                                            '<i class="icon-del" onclick="$(this).delImage(\''+ret.savepath+'\',this)"></i></li>');
                                    }
                                    $("#upImg").prepend($img);
                                    $(this).images.push(ret.savepath);
                                    if($(this).images.length==opts.maxNum){
                                        $("#upload").hide();
                                    }
                                }
                            }
                        };
                    },
                    compress: function(img) {
                        var canvas = document.createElement("canvas"),
                            ctx = canvas.getContext('2d'),
                            tCanvas = document.createElement("canvas"),//瓦片canvas
                            tctx = tCanvas.getContext("2d");
                        var initSize = img.src.length;
                        var width = img.width;
                        var height = img.height;

                        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
                        var ratio;
                        if ((ratio = width * height / 4000000)>1) {
                            ratio = Math.sqrt(ratio);
                            width /= ratio;
                            height /= ratio;
                        }else {
                            ratio = 1;
                        }

                        canvas.width = width;
                        canvas.height = height;

//        铺底色
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(0, 0, canvas.width, canvas.height);

                        //如果图片像素大于100万则使用瓦片绘制
                        var count;
                        if ((count = width * height / 1000000) > 1) {
                            count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片

//            计算每块瓦片的宽和高
                            var nw = ~~(width / count);
                            var nh = ~~(height / count);

                            tCanvas.width = nw;
                            tCanvas.height = nh;

                            for (var i = 0; i < count; i++) {
                                for (var j = 0; j < count; j++) {
                                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

                                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                                }
                            }
                        } else {
                            ctx.drawImage(img, 0, 0, width, height);
                        }

                        //进行最小压缩
                        console.log('*****',quality)
                        var ndata = canvas.toDataURL('image/jpeg', quality);

                        console.log('压缩前：' + initSize);
                        console.log('压缩后：' + ndata.length);
                        console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");

                        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

                        return ndata;
                    }
                };
                funs.bindEvent();
            });
        }
    });
})($);

2、调用

var CommentDetail = {
    bindEvent : function () {
        var url ="/js/ueditor/jsp/uploader.jsp?action=uploaduser&dirName=comment&needCompress=true";  //上传路径
        $("#upload").fileUpload({
            "url": url,
            "file": "comment",
            "maxNum": 6
        });
    }

3、html

<div class="try-my-push clearfix">
                <ul class="list" id="upImg">
                    <!--<iframe id="upframe" name="upframe" src="" style="display:none;"> </iframe>-->
                    <li class="try-report-btn" id="upload">
                        <a href="javascript:;">
                            <img src="data:images/input-file-default.png" alt="" width="100%;"style="max-width: 100%;">

                        <!--<form action="/plugins/ueditor/jsp/uploader.jsp?action=uploaduser&dirName=headimg&needCompress=true"-->
                        <!--method="POST" id="form1" enctype="multipart/form-data">-->
                            <input type="file" id="front-file" class="fileToUpload img-file">
                        </a>
                        <!--</form>-->
                    </li>
                </ul>
            </div>

可以实现单张图片压缩后上传，无法多张上传，通过for循环 多次异步请求，结果有可能返回同一个结果或者返回多个结果，但是是同一个图片。