使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
来源:互联网 发布:难听的歌网络歌手 编辑:程序博客网 时间:2024/06/06 09:42
最近使用阿里云空间做个人网站,使用的是.net mvc4 +botstrap,想做个图片上传的功能,查看了郝老师http://www.cnblogs.com/haogj/archive/2013/04/27/3046138.html的博客,功能倒是没什么问题,问题是黑色的上传按钮跟界面不那么和谐,经过半个来小时的思考和调试后,最初的考虑是在button中添加uploadify的span,有点小问题是点击botton前面一小段没有反映,点击后面没有反映。设计margin和padding也没用(技术不到家),后面想到使用click赋值,将span的事件传递到botton中,能力有限没有结果,最后的方案是在uploadify的uploadify事件后,手动给span嵌套一层button,button就跟bootstrap原生的button一模一样了,点击也完美,如下:
1.增加jquery代码
$('#uploadify').uploadify({ uploader: '/home/upload', // 服务器端处理地址 swf: '/update/uploadify.swf', // 上传使用的 Flash buttonCursor: 'hand', // 按钮的鼠标图标 buttonText: "图片上传", // 按钮上的文字 fileObjName: 'Filedata', // 上传参数名称 // 两个配套使用 fileTypeExts: "*.jpg;*.png", // 扩展名 fileTypeDesc: "请选择 jpg png 文件", // 文件说明 auto: true, // 选择之后,自动开始上传 multi: true, // 是否支持同时上传多个文件 queueSizeLimit: 5 // 允许多文件上传的时候,同时上传文件的个数 }); $("#uploadify-button").html("" + $("#uploadify-button").html() + "");
2.删除掉uploadify.css中对button的设置,最后结果如下:
3.至此,界面看起来就比较和谐了。
阅读全文
0 0
- 使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
- asp.net+uploadify实现图片上传图片
- MVC4+Jquery对话框中使用Uploadify上传文件
- .Net MVC4 使用心得(一)使用uploadify和wcf存储服务时的文件上传问题
- .net mvc4 利用 kindeditor 上传本地图片
- Bootstrap框架----单张图片上传实现---Uploadify插件
- 图片上传插件uploadify的使用
- jquery.uploadify.min.js上传图片使用
- uploadify图片上传插件使用实例
- 前端案例--图片上传功能
- ASP.NET MVC使用Uploadify上传文件
- asp.net中使用Uploadify插件实现多张图片上传,上传后可显示缩略图、删除图片
- MVC4 使用 bootstrap daterangepicker
- uploadify上传文件功能
- yui学习笔记(二)----使用css工具保持一致性
- struts2结合uploadify-v3.1完成批量图片上传功能
- MVC4 + uploadfy 上传图片!
- uploadify上传图片
- 【动态】IBM区块链扩展到限制全球塑料垃圾乱丢的现象
- Linux-视频监控系统(14)-项目总结
- Subversive SVN Connector installation fails in Eclipse Oxygen 安装eclipse svn
- 扑克牌顺子
- Android 如何去除ViewPager的左右滑动监听
- 使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
- retrofit(2017_09_22)
- 移动设备显示尺寸大全 之CSS3
- Intent数据的传递2017——09——15
- BottomBar的基本使用
- java21个知识点重点
- uvalive 4848 Tour Belt
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- 【HBase调优】Hbase万亿级存储性能优化总结