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>
    

      

  • 相关阅读:
    CF1539 VP 记录
    CF1529 VP 记录
    CF875C National Property 题解
    CF1545 比赛记录
    CF 1550 比赛记录
    CF1539E Game with Cards 题解
    CF1202F You Are Given Some Letters... 题解
    vmware Linux虚拟机挂载共享文件夹
    利用SOLR搭建企业搜索平台 之九(solr的查询语法)
    利用SOLR搭建企业搜索平台 之四(MultiCore)
  • 原文地址:https://www.cnblogs.com/pandaer/p/5319653.html
Copyright © 2011-2022 走看看