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>
fileupload实现控制大小进行图片上传的更多相关文章
- jsp中简易版本的图片上传程序
1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO ...
- CKEditor 自主控制图片上传
在ASP.NET中使用CKEditor编辑器,如果想控制图片上传,即把上传的图片路径名存到数据中,可以自定义一个上传功能 首先自定义CKEditor的配置文件 在config.js中添加以下代码,红色 ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- 图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- KindEditor 修改多图片上传显示限制大小和张数
在使用KindEditor的时候用到多图片上传时,提示有最多上传20张图片,单张图片容量不超过1MB: 修改的文件的地方在:kindeditor\plugins\multiimage\multiima ...
- 视频(其他)下载+tomcat 配置编码+图片上传限制大小
视频下载:前台 jsp function downVideo(value,row,index){ return '<a href="<%=basePath%>admin/v ...
- SpringMVC 图片上传,检查图片大小
使用SpringMVC+Spring 前端提交图片文件到Controller,检查上传图片大小是否符合要求 直接上代码了 1.校验图片大小 这里提供出验证的方法,用于在需要校验的地方调用 /** * ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
随机推荐
- 学SpringMVC收藏
一个较完整的SpringMVC工程的配置 2014-01-22 17:17:25 标签:java spring springMVC 配置 springSecurity web.xml 原创作品,允许 ...
- IOS UI 第十篇: UITABLEVIEW
uitableView review yesterday’s knowledge : folding group : ------------------------------- ...
- 收缩SQL Server日志不是那么简单
收缩SQL Server日志不是那么简单的(翻译) 原文地址:http://rusanu.com/2012/07/27/how-to-shrink-the-sql-server-log/ 说明:本 ...
- CHD4 impala安装配置
impala基于CHD,提供针对HDFS,hbase的实时查询,查询语句类似于hive 包括几个组件 Clients:提供Hue, ODBC clients, JDBC clients, and th ...
- 最短路模板[spfa][dijkstra+堆优化][floyd]
借bzoj1624练了一下模板(虽然正解只是floyd) spfa: #include <cstdio> #include <cstring> #include <alg ...
- Windows 8 Store Apps
重新想象 Windows 8 Store Apps 系列文章索引 Posted on 2013-11-18 08:33 webabcd 阅读(672) 评论(3) 编辑 收藏 [源码下载] 重新想象 ...
- WCF从零学习之设计和实现服务协定2
WCF从零学习之设计和实现服务协定(二) 在创建服务协定之前,有很多WCF术语,比如: 消息.服务.终结点 创建协定 类或接口都可以定义服务协定,建议使用接口,因为接口可以直接对服务协定建模 服务 ...
- windows下使用git时生成sshkey和配置
在windows下如何安装git就不介绍了,我这里主要使用的TortoiseGit,主要记录下在windows上如何通过sshkey链接git 在开始菜单中找到git bash,git bash是gi ...
- C/C++基础知识总结——数据的共享与保护
1. 标识符的作用域与可见性 1.1 作用域 标识符的作用域包括:函数原型作用域.局部作用域.类作用域.命名空间作用域 (1) 函数原型作用域:函数的参与的作用域就是从函数的开始到结束 (2) 局部作 ...
- 软件Scrum
软件海贼团 OnePiece (版权所有) 最近迷上了“海贼王”这部动画片,不仅仅是因为其中的人物个个性格鲜明,剧情跌宕起伏扣人心弦,各种耍宝搞笑,还感觉到这个团队很像理想中的敏捷软件团队. 作为一直 ...