使用.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.至此，界面看起来就比较和谐了。