zoukankan      html  css  js  c++  java
  • js图片压缩+ajax上传

    图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG

    用起来比较简单

      <input type="file" id="image1" class="hidden" accept="image/png,image/gif,image/jpeg" /
    //图片压缩
    $("input:file").change(function () {
            var file = this.files[0];
            lrz(file).then(function (res) {
              //压缩成功
            }).catch(function () {
               //压缩失败
            }).always(function () {
              //成功失败都执行
            })
        });

    完整代码

    $("input:file").change(function () {
            var self = $(this);
            var file = this.files[0];
            lrz(file).then(function (res) {
                alert('压缩前' + (file.size / 1024).toFixed(2) + "kb");
                alert('压缩后' + (res.fileLen / 1024).toFixed(2) + "kb");
                var postData = new FormData();
                postData.append("imgfile", res.file);
                postData.append("name", file.name);//解决重命名的问题
                $.ajax({
                    url: '/APP/Inventory/UploadImg',
                    data: postData,
                    type: 'post',
                    contentType: false,//禁止修改编码
                    processData: false,//不要把data转化为字符
                    beforeSend: function () {
                      
                        //加载层
                        layer.open({
                            type: 2,
                            shadeClose: false,
                            content: '上传中...'
                        });
                    },
                    success: function (data) {
                        data = eval("(" + data + ")");//返回的是json字符串,需要转为json对象
                        if (data.state == 1) {
                            self.prev().children("img").attr("src", res.base64); //预览
                            self.next().val(data.LogMessage);
                        }
                        else {
                            $alertMsg(data.message);
                        }
                    },
                    error: function () {
                        $alertMsg("上传失败,请重试!");
                    },
                    complete: function () {
                        console.log("上传结束");
                        layer.closeAll();
                    }
                });
    
            }).catch(function () {
                console.log("失败");
            }).always(function () {
                self.val("");//清空上传控件
               console.log("压缩完毕")
            })
        });

    后台控制器

     public ActionResult UploadImg(HttpPostedFileBase imgfile, string name)
            {
            //
        
            }            
  • 相关阅读:
    Zabbix5 Frame 嵌套
    Zabbix5 对接 SAML 协议 SSO
    CentOS7 安装 Nexus
    CentOS7 安装 SonarQube
    GitLab 后台修改用户密码
    GitLab 查看版本号
    GitLab Admin Area 500 Error
    Linux 安装 PostgreSQL
    Liger ui grid 参数
    vue.js 是一个怪东西
  • 原文地址:https://www.cnblogs.com/zhangmm96/p/11103494.html
Copyright © 2011-2022 走看看