码迷,mamicode.com
首页 > Web开发 > 详细

使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性

时间:2014-09-23 21:14:15      阅读:595      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   使用   ar   文件   div   

最近使用阿里云空间做个人网站,使用的是.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的设置,最后结果如下:

bubuko.com,布布扣

 3.至此,界面看起来就比较和谐了。

使用.net mvc4 + bootstrap +uploadify上传图片功能保持前端css一致性

标签:des   style   blog   http   color   使用   ar   文件   div   

原文地址:http://www.cnblogs.com/nozero/p/3989162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!