zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    vue-cli模拟后台数据交互
    打卡谱
    前端面试题
    ps简单切图
    常见浏览器兼容性问题与解决方案
    扯淡 测量体质公式 哈哈哈哈会不会封我号
    JAVASCRIPT 转换字符串杂记
    日记(六)
    gitshell 基础操作
    gitshell fork别人项目
  • 原文地址:https://www.cnblogs.com/pandaer/p/5319653.html
Copyright © 2011-2022 走看看