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>

  

fileupload实现控制大小进行图片上传的更多相关文章

  1. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  2. CKEditor 自主控制图片上传

    在ASP.NET中使用CKEditor编辑器,如果想控制图片上传,即把上传的图片路径名存到数据中,可以自定义一个上传功能 首先自定义CKEditor的配置文件 在config.js中添加以下代码,红色 ...

  3. 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)

    1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...

  4. 图片上传并显示(兼容ie),图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  5. KindEditor 修改多图片上传显示限制大小和张数

    在使用KindEditor的时候用到多图片上传时,提示有最多上传20张图片,单张图片容量不超过1MB: 修改的文件的地方在:kindeditor\plugins\multiimage\multiima ...

  6. 视频(其他)下载+tomcat 配置编码+图片上传限制大小

    视频下载:前台 jsp function downVideo(value,row,index){ return '<a href="<%=basePath%>admin/v ...

  7. SpringMVC 图片上传,检查图片大小

    使用SpringMVC+Spring 前端提交图片文件到Controller,检查上传图片大小是否符合要求 直接上代码了 1.校验图片大小 这里提供出验证的方法,用于在需要校验的地方调用 /** * ...

  8. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  9. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

随机推荐

  1. 7 MySQL存储过程和函数

    目录: 1. 存储过程和函数概述2. 准备工作3. 存储过程操作4. 创建带参存储过程5. 查看存储过程 1. 存储过程和函数概述 MySQL的存储过程(stored procedure)和函数(st ...

  2. C语言面试问答5

    12个滑稽的C语言面试问答——<12个有趣的C语言问答>评析(5) 前文链接:http://www.cnblogs.com/pmer/archive/2013/09/17/3327262. ...

  3. 【NET】Winform分页控件初探

    public partial class WinFormPager : UserControl { ; /// <summary> /// 当前页 /// </summary> ...

  4. - 高级篇:二,IL设置静态属性,字段和类型转换

    - 高级篇:二,IL设置静态属性,字段和类型转换 静态属性赋值 先来看 Reflector反射出的IL源码(感谢Moen的提示),这次用 Release模式编译,去掉那些无用的辅助指令 public ...

  5. 限制某个进程只能在某个CPU上运行

    首先可以调用GetSystemInfo查看有多少个CPU,再通过调用: BOOL WINAPI SetProcessAffinityMask( __in HANDLE hProcess, __in D ...

  6. vim 多行同时输入,且输入数值递增

    很有用的命令. 很给力的说. http://vim.wikia.com/wiki/Making_a_list_of_numbers 我在 html中需要增加新的标签的时候,就有用到过. 原来的html ...

  7. SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer

    SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企 ...

  8. svn的使用详细说明

    转载请指明:杨凯专属频道 1.在电脑的任意位置创建一个版本库文件夹 最好是全英文的目录 例如 在c:\svn下面创建一个 2.打开此文件,在这里右键 找--TortoiseSVN--->Crea ...

  9. 开发团队在TFS中使用Git Repository (一)

    在研发团队中,代码版本管理是最为基础的必要工具.个人使用过的版本管理工具有SVN.VSS.ClearCase.TFS.Git,从团队的角度和使用角度来说,个人倾向于与使用TFS作为团队的基础工具.首先 ...

  10. JavaScript的对象与Json

    JSON有非常严格的语法,在string上下文里{ "prop": "val" } 是个合法的JSON,但{ prop: "val" }和{ ...