• fileupload实现控制大小进行图片上传


    if ($(".img-upload").length > 0) {
    $('.img-upload').fileupload({
    type: 'POST',
    url: "/app/uploadImage",
    dataType: 'json',
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    disableImageResize: /Android(?!.*Chrome)|Opera/
    .test(window.navigator && navigator.userAgent),
    add:function(e,data){//控制图片大小
    var goUpload=true;
    var uploadFile=data.files[0];
    if(uploadFile.size>512000){
    goUpload=false;
    $('.master-updefeat').css("visibility","visible")
    }
    if(goUpload==true){
    $('.master-updefeat').css("visibility","hidden")
    data.submit();
    }
    },
    done: function(e, data) {
    var imgdata = data.result;
    if (imgdata.errcode == 0) {
    $(".J-masternum").hide();
    $(".J-masterimg").attr("src", imgdata.data.url);
    }
    },
    change: function(e, data) {//图片上传时显示进度
    $(".J-masternum").show();
    },
    progressall: function(e, data) {//进度
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $(".J-masternum").text(progress + '%');
    },
    error: function(e, data) {
      错误回调
    },
    });
    }
    

      

    下面为对应的HTML代码

    <div class="clearx ">
    <div class="master-addicon">
    <img src="{{subaccount['avatar']}}" class="J-masterimg" /> 
    </div>
    <div class="master-addiconinfo">
    <div class="master-iconnotice">图标尺寸不超过250*250,大小不超过500K</div>
    <div class="clearx">
    <a href="javascript:;" class="master-filebtn">上传图标<input type="file" name="files[]" class="img-upload" /></a>
    <span class="master-num J-masternum">0%</span>
    </div>
    <div class="master-updefeat">图片上传失败,请<a href="javascript:;" class="J-uploads">重试<input type="file" name="files[]" class="img-upload" /></a></div>
    </div>
    </div>
    

      

  • 相关阅读:
    Matplotlib如何绘制子图
    数据挖掘的葵花宝典
    Matplotlib如何显示中文
    python绘制WordCloud词云图
    Selenium实现微博自动化运营:关注、点赞、评论
    从小白视角理解<数据挖掘十大算法>
    Laravel模型自动转换类型
    python数据分析常用图大集合
    数据分析常见概念
    Pandas数据分析基础之时间序列
  • 原文地址:https://www.cnblogs.com/pandaer/p/5319653.html
Copyright © 2020-2023  润新知