H5移动端多图片压缩上传

Html

Css

//点击删除图片
function remove(x) {
    $("#fileupload").val('')
    $('.' + x + '').remove();
}
$(function() {

//把点击事件传递到input上面去
    $('#mi').on('click', function() {
        $('#fileupload').trigger('click');
    })

$("#fileupload").change(function() {
        if (typeof(FileReader) != "undefined") {
            // var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
            var regex = /(.jpg|.jpeg|.png)$/;

$($(this)[0].files).each(function() {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file[0]);
                    reader.onload = function(e) {
                        console.log(e)
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        var image = new Image();
                        image.src = this.result;
                        image.onload = function() {
                            console.log(3)
                            var cw = image.width;
                            var ch = image.height;
                            var w = image.width;
                            var h = image.height;
                            canvas.width = w;
                            canvas.height = h;
                            if (cw > 400 && cw > ch) {
                                w = 400;
                                h = (400 * ch) / cw;
                                canvas.width = w;
                                canvas.height = h;
                            }
                            if (ch > 400 && ch > cw) {
                                h = 400;
                                w = (400 * cw) / ch;
                                canvas.width = w;
                                canvas.height = h;

}
                            ctx.drawImage(image, 0, 0, w, h);
                            //生成时间戳
                            var timestamp = new Date().getTime();
                            //onclick事件是点击删除图片事件，具体根据自己的实际情况加上样式加上一个交叉使用。
                            $('body').append('<div class="image ' + timestamp + '" onclick="remove(' + timestamp + ')"></div>')
                            $('.' + timestamp + '').css({
                                'width': '7rem',
                                'height': '7rem',
                                'background': 'url(' + canvas.toDataURL("image/jpeg", 0.5) + ') no-repeat center',
                                'background-size': 'cover'
                            })
                            // console.log(canvas.toDataURL("image/jpeg",0.7))
                        }

}
                } else {
                    alert(file[0].name + " is not a valid image file.");
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");

}
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

H5移动端多图片压缩上传



代码描述：简单的图片压缩上传，ios支持多图，安卓只能一张一张上传了，大家可以把需求和大BUG小BUG和问题通通写下，有时间会回答和优化。目前点击图片就会直接删除，没有css，只有核心代码，css需要自己努力哦。

ios支持多图，安卓只能一张一张上传了

1

最新

发表评论全部评论

暂时没有评论！

诺0

2018/9/11 16:45:32

dwa
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

The lamb of God.

相关代码

H5移动端多图片压缩上传

最新