首页 > 代码库 > 使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
最近使用阿里云空间做个人网站，使用的是.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.至此，界面看起来就比较和谐了。
使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。