首页 > 代码库 > 使用.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一致性