html5压缩图片并上传

手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3

代码如下:

    // 上传图片
    function uploadFile(path) {
        var type = plus.storage.getItem("upload_goods_image");
        //选择成功
        $("#heisebg").removeClass("heisebg").addClass("heisebghid");
        $("#waitingupload").removeClass("heisebghid").addClass("heisebg");

        //https://github.com/think2011/localResizeIMG3
        // 压缩图片
        lrz(path, {
            width: 500,
            quality: 0.7,
            done: function (results) {
                $.ajax({
                    type: "POST",
                    url: configManager.RequstUrl + "api/common/base64upload",
                    async: true,
                    data: { base64: results.base64, size: results.base64.length, dir: "goods" }
                }).done(function (data) {
                    if (data.state != "success") { console.log(data.message); return; }
                    var src = configManager.goodsImgurl.format(data.id, "") + '500-200';
                    if ("addspic" == type) {
                        var sImageStr = "<img width='98%' οnclick='javascript:$(this).remove();' class='spic' title='{0}' src='{1}'>";
                        $("#addspic").before(sImageStr.format(data.id, src));
                    }
                    if ("addbpic" == type) {
                        var bImageStr = "<img width='98%' id='bpic' title='{0}' src='{1}'/>";
                        $("#addbpic").html(bImageStr.format(data.id, src));
                    }
                    $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                    try { myScroll.refresh(); } catch (err) { }
                }).fail(function () {
                    plus.nativeUI.toast("上传失败!");
                    $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                });
            }
        });
    }

 

代码来源:http://xxling.com/blog/article/75.aspx 我只是将其代码中asp实例改成了php,转载及使用必须注明原作者。 请遵循原作者开放分享的方式,请勿用来赚取积分!!! 代码做的非常简单,只是用于演示,没有加入任何过滤函数。请务必修改(加入过滤函数)后使用,【坚决不能】直接用于网站!! 之前没怎么接触过js,也是随手做一个。如果不满意请各位多包含,毕竟我不是骗分,也请您高抬贵手。 目前网上看到最好的一个HTML5批量上传程序,它使用纯html+js进行批量上传,不需要flash、jquery等额外组件,大小只有10KB左右。 主要是我想研究一下html5批量上传,但发现纯html5php中会出现超时、没有进度等问题,于是这网上找了一圈。发现目前的代码,要不就是传统的flash,要不就是调用臃肿的jquery,要不就是代码动辄几百K,根本没法分析。而且CSDN上资源骗分居多,找了一圈花了几十分,还是没下载到一个真正满意的代码。 于是根据这位博主的分享,把原程序精简,并改为了php脚本。因为我php也是初学,之前一直出现只上传1个文件的问题。后来发现是由于定义秒为文件名,本地速度过快将前面的函数覆盖了。多亏了php的sleep,才将这个问题解决。 于是这个简单的批量上传组件就这样做好了,欢迎各位测试和修改。 最后再次提醒各位务必牢记原作者xiaolingzi和其博客地址地址: http://xxling.com/blog/article/75.aspx 转载请注明原作者,修改和使用也不要去掉js的作者标记。 毕竟那标记就一行,人家写个程序很不容易,请各位尊重作者的劳动。谢谢各位配合!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值