场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条.
解决:自定义jquery控件
没有解决:非图片上传时,会有浏览样式的问题;
解决方案;
1.样式 – bootstrap 的css和图标与metro-ui-css的部分css
2.js 自定义控件
3.后台 mvc4
-------------------------------------------------
效果:
1.
[class*=border-color] {
border: 2px solid;
}
.border-color-blue {
border-color: #2d89ef !important;
}
.bg-color-blue {
background-color: #2d89ef !important;
}
.fg-color-red {
color: #b91d47 !important;
}
.fg-color-blue {
color: #2d89ef !important;
}
.fg-color-white {
color: #ffffff !important;
}
.bg-color-lighten {
background-color: #d5e7ec !important;
}
.percentage-bar {
height: 5px;
width: 100%;
margin-bottom: 10px;
*zoom:;
}
.percentage-bar .bar {
float: left;
width:;
background-color: #008287;
height: 5px;
}
.percentage-bar:before,
.percentage-bar:after {
display: table;
content: "";
}
.percentage-bar:after {
clear: both;
}
/*
* Metro UI CSS
* Copyright 2012 Sergey Pimenov
* Licensed under the MIT License
*
* Tiles.less
*
*/
.tile-group {
margin:;
margin-right: 80px;
float: left;
width: auto;
height: auto;
min-height: 1px;
width: 802px;
}
.tile {
display: block;
float: left;
background-color: #525252;
width: 150px;
height: 150px;
cursor: pointer;
box-shadow: inset 0px 0px 1px #FFFFCC;
text-decoration: none;
color: #ffffff;
overflow: hidden;
position: relative;
font-weight:;
font-size: 11pt;
letter-spacing: 0.02em;
line-height: 20px;
font-smooth: always;
margin: 0 10px 10px 0;
overflow: hidden;
}
.tile * {
color: #ffffff;
}
.tile .tile-content {
width: 100%;
height: 100%;
padding:;
padding-bottom: 30px;
vertical-align: top;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
font-weight:;
font-size: 9pt;
font-smooth: always;
color: #000000;
color: #ffffff;
line-height: 16px;
}
.tile .tile-content:hover {
color: rgba(0, 0, 0, 0.8);
}
.tile .tile-content:active {
color: rgba(0, 0, 0, 0.4);
}
.tile .tile-content:hover {
color: #ffffff;
}
.tile .tile-content h1,
.tile .tile-content h2,
.tile .tile-content h3,
.tile .tile-content h4,
.tile .tile-content h5,
.tile .tile-content h6,
.tile .tile-content p {
padding:;
margin:;
line-height: 24px;
}
.tile .tile-content h1:hover,
.tile .tile-content h2:hover,
.tile .tile-content h3:hover,
.tile .tile-content h4:hover,
.tile .tile-content h5:hover,
.tile .tile-content h6:hover,
.tile .tile-content p:hover {
color: #ffffff;
}
.tile .tile-content p {
font-weight:;
font-size: 9pt;
font-smooth: always;
color: #000000;
color: #ffffff;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.tile .tile-content p:hover {
color: rgba(0, 0, 0, 0.8);
}
.tile .tile-content p:active {
color: rgba(0, 0, 0, 0.4);
}
.tile .tile-content p:hover {
color: #ffffff;
}
.tile.icon > .tile-content {
padding:;
}
.tile.icon > .tile-content > img {
position: absolute;
width: 64px;
height: 64px;
top: 50%;
left: 50%;
margin-left: -32px;
margin-top: -32px;
}
.tile.icon > .tile-content > i {
font-size: 128px;
margin: 9px;
}
.tile.image > .tile-content,
.tile.image-slider > .tile-content {
padding:;
}
.tile.image > .tile-content > img,
.tile.image-slider > .tile-content > img {
width: 100%;
height: auto;
min-height: 100%;
max-width: 100%;
}
.tile.image-set > .tile-content {
margin:;
padding:;
width: 25% !important;
height: 50%;
float: left;
border: 1px #1e1e1e solid;
}
.tile.image-set > .tile-content > img {
min-width: 100%;
width: 100%;
height: auto;
min-height: 100%;
}
.tile.image-set .tile-content:first-child {
width: 50% !important;
float: left;
height: 100%;
}
.tile.double {
width: 310px;
}
.tile.triple {
width: 470px;
}
.tile.quadro {
width: 630px;
}
.tile.double-vertical {
height: 310px;
}
.tile.triple-vertical {
height: 470px;
}
.tile.quadro-vertical {
height: 630px;
}
.tile .brand,
.tile .tile-status {
position: absolute;
bottom:;
left:;
right:;
min-height: 30px;
background-color: transparent;
*zoom:;
}
.tile .brand:before,
.tile .tile-status:before,
.tile .brand:after,
.tile .tile-status:after {
display: table;
content: "";
}
.tile .brand:after,
.tile .tile-status:after {
clear: both;
}
.tile .brand > .token,
.tile .tile-status > .token {
position: absolute;
bottom:;
right:;
right: 5px;
margin-bottom:;
color: #ffffff;
width: 34px;
height: 28px;
text-align: center;
font-weight:;
font-size: 11pt;
letter-spacing: 0.01em;
line-height: 14pt;
font-smooth: always;
padding-top: 3px;
}
.tile .brand > .token.activity,
.tile .tile-status > .token.activity {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGMSURBVDhPvZMtTwNBEIbv2mtScaICcQJRgSgJCQIEhqSiAlEHAlFRwU/ov0AgUEgUsrIkiJIgMOAQJFSQQAIJJBWIu95Hj2eGvXIpB3W8yWTn452Z3dld25pDmqZuFEWdcrm8jr6JK7Bt+wb9Ft85+vsXswBxHHdIfmFNi4TYG7InXAp6ss52kCTJIc6e6KzSVbrdYzrYDaSFXZU4uEQ8x3FW1ZpMJge5Tn3IdQ3kID5iw4zHTqIsUEP3TWCA7WhgDjRZg/eUFRCR3Fl3KYJjyfALIUU46jHcsSlQl8FdmQJnhrcQJFbJ6QZB0LDDMNyS4XBFo1Kp9Gw4/wi247GLHmvNuBaC47Y5gtzIQB1mBmMGdDSdTpfV+QdM8vfcsqkap6ClgQIQa+a4bXViPGRO5ILjuBqYAwk7yIfhXcNz9CljDFkkST6P4JGjnHA7d+gBxAY3tIve1Khljbi1beKvakHQp0uhfTrMjvOL9H3fX9FE8OM7yxAhdem4QWHZkSufSoTYaaVSkY9kYFmfXgyTciI3uacAAAAASUVORK5CYII%3D) 50% no-repeat;
}
.tile .brand > .token.alert,
.tile .tile-status > .token.alert {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPpZMtT8RAEIbb7YoTJ04gkQgQuBNIEpB4LD8AwQ9AkCCQhGAvQSAuKHCIE0gEP+DEISAhQYK4pE0/eWa65a7lSvh4k8nsvDv77sxs67UhSZLNNE0LZ3uO/gLj/J+hAkVRWI1+geqMCuR5fkKZoyiKViX+DuQu094wy7KhEmEYrkAk0qt4Nk5R77GszQCuE8fxIXxY8ZJjgiBY8n3/UcTwlsQDNifGmF29AcBtITyGOyan47gXXFfW2g/q+yi+VeptJhVgR1KRHp4HZI+bzknQlhYcvpQZuHRF8xmnCDyLL8MZEI9o4YkW3h1VB+o73DJp3to08l7xsw9Lng5i1EiSSV/Pcbdwzfk8MLcNqjIyye1STnHD5joln7lYcGWtXaP8gYsFfeJyHvR9waExt3wKsV74L3Brn/geu3OUDqiL1T7nNoEK8mLi9RUoZYqlsv4pqtf459/oeR8seozS7mDHCwAAAABJRU5ErkJggg%3D%3D) 50% no-repeat;
}
.tile .brand > .token.available,
.tile .tile-status > .token.available {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKvSURBVHjahJA/bJR1HMY/31977x33r2LuClc1LYM9TSAUr5gqtkVJjAkSFxYHE3VgaWRw0cUwOagxMZLApoXFBIwuHVSoQYkVMBXUpqSkMW9jaS25plh7/3rv+3scTIwixs/8PHn+2Bk/SVtN2mqxacYOKw13KfNiXtlneihmDONXqs0VVs/VXP1UqJvnc8qBeZoWYWf9JHXVqWkj2EX55G76X86R4W40aDHNzMdzLBwJLLEWm6fTI+o0knvZ+dkgO/cDfGczTNpl5gjxePrpY0SPMKwKT1A5nCe7Y4ofDgQEv/Ghn2AqunZabUmR9Fb8gQoaUVIVFTSiokaV0qDu0T694Y+rGbWktnQ5+nHiuP+IjrFjR4cqevj9wBK8beO87t6jiyzbKJAiIEWSreQxjAm7QGyeAwzRzb39i/7WFbdV2bGs0nxvs7zjxtlOgRwZPP6v7R5PmhQPUOKEneFLd4UECfqs51WXU/opDL6wb/mdDfJkEfrXgUKk2UKbiM/5BoD76d7reujOANwgJH9H8p14PDnSzBGySZsSReecDIAIDxj/jxH/LcQtW7UJ0E8f69RwuP+0Ohwb1CnTS0CCW6zK3Wb9a4AnNcgWktRoYHdpYhgtWvypfRSARVv5yVXd2smGWuzTHo7qeRZZpk7zH00cRos2ITd5yT/HQY0gPKGW3u0YPvZ06HB77tO2hx5jN5HFTNk11lgHRIs2VW5Tp8kRf5g3eYUUSa5y/eKsfn7NTvlPaCjqelwDF3bx4ADAeXeJc1xijpCYmDJ9jKrCIe0H4IaF81/56VGDJTvtPwV1IFmhTO/4AOWDSQIAWmwiRIokADEx08xeXGD5hUjxQp0GnQCdOAKS1RnNP7tO7VDOMmO9bB8qUQRghVVCW7raUOPEvH45W7IidRoA/DEAmmk0pL+n6f4AAAAASUVORK5CYII%3D) 50% no-repeat;
}
.tile .brand > .token.unavailable,
.tile .tile-status > .token.unavailable {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKASURBVHjalJK9axxXFMV/772ZzOysVqvRDgtaSSwpJYFwY3ATEpIm5KNLawgp3Ljz/5E2bu20CYQUBoMNNnaRMkUKqYiQtIgdCQ0TaVc7M29n3nspzC7GMYYcuMWFe7jnHI4YjUY453DOYYyh0+l8opT63vO8L8MwbAshqKqq0lo/c849rqrquXMOIcSbGY1GWGsxxny0urr6MI7jH5RSAFhrAZBSLvc8z3+dTqf3lFL/SCnxAIwxwdra2tP19fXPAC4vL8myjKIoAIiiiF6vR7/fJ0mS75RSH19dXX0hpbwWx8fHrKys/JwkyV1rLYeHh5yenuKc420lzjm2trbY3d3F8zzyPH8ynU6/ERcXF3fiOP7D930ODg44OjoiDMOl7AWstZRlyXA4ZH9/H2MM4/H4K+l53n3f98myjJOTE4Ig+A95kUMURZydnXF+fo5SiiiKHkjf9z9f+AaWst+HRfKL2yiKbssgCNrOOWaz2Xs/vwulFLPZjLquCcPwDcM5x//B2/dyPp9XC3/WWoQQHyQbY2i32/i+T1VVTtZ1/QogSZJlGz/02VpLkiQAlGX5l2ya5mHTNPT7fba3tynLctnAd8llWTIYDNjY2MBaS1EUP0qt9YvJZPI7wM7ODsPhEK01WmuapqFpGrTWVFXFYDBgb28PIQTX19ev67r+TYzHY7TW3W63+zKO41sAaZqSZRk3NzcAtNtter0em5ubAEwmk7/zPP9USjkWaZoyn89xziWdTudRt9v9etGFuq4B8H1/aSXP89dFUdx1zp065xBpmlLXNUIIjDG0Wq1vPc+7H4bhnVarhRCCsiwpiuJPY8xPRVH8EgQBxhistfw7ABpxTL93U9x/AAAAAElFTkSuQmCC) 50% no-repeat;
}
.tile .brand > .token.away,
.tile .tile-status > .token.away {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAJ2SURBVHjajJI7iFVnFIW//d9zz52ZO2fG14gzJBgbp5JYKPh+NqKxsxWMRZoBCxu1sAuBKFaClj5KDUQhRXybCIqICjqNYjFDhtExN45e7/uc8y+L/yJGp3A1+2fDWv/ea23zlQvIp0gpRgfrWbZRNrhP0cAOopEyGGSvWmQz15zq59SeuC5LsAis0MJ85SLKG8jXY3pXnKb8/X6iBAB8KLhuzZtQf/gbrWc/WTGetSgnAg9qlCiv/pNk1RYAqz3A6jeg/SyoxMtReRNKNsLAhj24gWW0726H+B3+9Rmyd3fPp5KyXMpf/SqNL5KelEIdH5Ke9Ejj8+SnjyrLWkolZbX7f/jZk5h/e3WN7197j0I/NnMMN3MYoiXgBv6/g+rQmUJDR/Ajv4BP0eylnU5u/pgK/Vj9Ee6/411y8gm5a4b1Qfwt9uYUrnoTXBGLvzvoFCXbDLDaVcjfd38WX0JBRCnUroRW/M1qRzRSxgPt55+NPRc8FJJgbtaB4rBz+phRxtcj//hylr5s4YDScvDVT0KfCw7yGpRGIYohfS2H3v4NoL6tYL3BbWwOsoHawY3y1tDJpp46p8pp5U2UrEcLD0BnCtT4bBIXyJ0J/Pwf0eAu8ELtiROO5uQtazy9LMAvPoKGDoU00n/CSr4K2RTkFfyCMRj+OWg2Ht9RNv27+X/PId8cVN+62/SvWAngqtehdq17yjmURlHfZjRvdxi98fyFr/21GWfT5ivnkQehRfSOnqV35S4KpW4w7ZB/1NNNMYf6wzukk3ulbBI1iIJkBBZX1Bn/gby621wyRrx0DcXhQGzPYOnEY/nmKbVeXLTicNcn+DAArZ4503S5ZjkAAAAASUVORK5CYII%3D) 50% no-repeat;
}
.tile .brand > .token.busy,
.tile .tile-status > .token.busy {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKNSURBVHjajJI9a1RBGIWfGeLdmPXuKkR0Q0RTmFsFUxgQNcaPRonpbAW1sAlY2IhFfoCIVSDaaVImFhYWmkTxAwJBVgttNqTYQFAjAWPi7t3svXeOxeC3hQdeZpiZ887DmTFuchIlCUoSTLOJ6erqV7F4QYXCaTo68hgDHz82WFmZsbXauKrVWYUhBjCNBsZNTaF6HdVqAT09tzlw4BJhyD8Vx1Au36dSuWyC4LPJMlpwDur1HH19jzh48DiAefUK8+QJVCrgHHR3o2PHUH8/HD16jkKhi7m5UwTBF9zdu6RzcxOJpFRSduOG1N4u5XJ+3LlTam2Vtm+XGxlR2mgokZTOzz90o6PgpqcPpRsbP83GSKWSFEXS/v2+okjq7JRA7vp1pZLSZlPJ5OQZqx07hrVtG+b1a+zNm7B7N4ShR/8u56CtDfbswYyNYZ8+hS1bMPv2XbUKw5MGMNPTsLEBhQJIfwco+SZJAo8f+7XOzj5LR0cegIUFb/715j/lnKerVKDZhFLJWlnrN9OU/1aW/Zha8+FDA4Dublhfh+8N/yVr4etXiCIIAvj0SZa1tRcAOnECtm6FWg2M+dtsDGxu8uMsYJaX31q7unpbcYyOHEFXrsDyMtTrv5NY683VKu7iRTQ4CBKqVm/h7twhnZ9/kEhK41ju2jWpWJTa2qRdu3zl81I+r2x4WNnamv8H5fKLZHQU48bHURwXdfjwM3p6egHs7CzMzPi0swyiCA0MoKEhj76wsOiePx/AmPfGTUwgQFI7UXSP3t5BcjmPvrnp37+19Wf65fJLlpbOK02XqNdpAaClBYJgVe/enWV9fciE4TB79x6iVPLGlRVMtfpGcTymxcUpUyr5nIBvAwDWIWcndiwtQAAAAABJRU5ErkJggg%3D%3D) 50% no-repeat;
}
.tile .brand > .token.newMessage,
.tile .tile-status > .token.newMessage {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhP1ZE9DgIhFIQhobDYg1haWniMbSw9j0exsfMAeg9L7Sy2kPATnCFI2LgYtjJOMjx4vPkoED+X5OK934cQ+thpFOYvSqmdMMascVDOuQMcGn1GptNaL4W1dgBkMwOSw8jeBJszIKMwexFAN0A+wnQG0Lh4wv0EJIb5AO4fRX8MoDFAlZAyPJSztOSSfiYLAYeyxTcdURcIrqSUJ7iLA4UmAdQbgnqvhakqgEoQXQtTXwEtIuCa9n8pIV67VJf6AmhGmgAAAABJRU5ErkJggg%3D%3D) 50% no-repeat;
}
.tile .brand > .token.paused,
.tile .tile-status > .token.paused {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVDhPY/j9+7fDnz9//mPBCQxQgE8NE1QN2WDUgFEDQGDUgIE3gIEBAArtNKc4HT7sAAAAAElFTkSuQmCC) 50% no-repeat;
}
.tile .brand > .token.playing,
.tile .tile-status > .token.playing {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEXSURBVDhPY4CBnz9/pvz+/dsFyiUaMEFpBiYmJhkgtf3v37/t////Z4GIEgZwA0CAkZGRBai5AmjIYSCtABXGC1AMQAIWf/78OQ/EEVA+ToDLAJBrBIDUcqBrZgNdwwMRxQQ4DYABoOYUoCGngYFsABVCAQQNgAINYCAf//XrVwGUDwfEGgDyEgfQkH5guGwGukoEKky8AUhA5sePH6DwAQOSDAC6YgIzM7MpJyfnHagQcQYAnfwGiD2BmguBhvyBCoMBMQbsYWFh0WVlZd0B5aMAnAYAbfzz79+/SqBmV6CtL6DCGACXAQ+ABliysbF1QPk4AYYBQI0rgH7VBWo+AxXCC+AGADV+AVKJQL9GAp0MYhMBGBgA8v5j1f90TA8AAAAASUVORK5CYII%3D) 50% no-repeat;
}
.tile .brand > .token.error,
.tile .tile-status > .token.error {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFiSURBVDhPjVM7TsNQELRjy8ISBQeIREtBEYnQUXCINFTkCCBxgNwAJI5AaejSpaCAEqRINBTcIQ1SbD9/mHmfZP3iSIw0ytt9O7O7thMGHpqmGVZVNQnD8AwcMde27RL8rOt6nqbpjy7sA4RTpdQKv20fcbcuy/IOZrGVbIHLpz7RHr52TJCYukuMeU+6WDBjdxej4UyLubMbm0KdBDyTzHWEyY01UEVRnA4Q8IEdaZVAFEW3yD/g+IzzFc6VuTFAHAPXO7vLKQi5q+suuOD+X15yx4ToEXON1QB3B6ZkC3Qd+q8Kaxzbo0TMCTLPefPAfPS8nTeOtnk1YEfMsf11pIm+y/P8BLusmaCZrevsLE1QO3F51FzopJyCQil2pAnFoLLxI7X6z8SxkVjgeMn4H/jGQz3Ht/BrY2MC85nrsI/sjNpDKzMTSODzHPELQ9EY1H9ndFqCHxC/JEnyrgs1guAPTvwreuY0IiIAAAAASUVORK5CYII%3D) 50% no-repeat;
}
.tile .brand > .token.attention,
.tile .tile-status > .token.attention {
background: #2d89ef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEbSURBVDhPtZI9bsJAEIVZ7ANQ5gApEomChjoNBUUOkSJFivSUQE3JEThCCo4BkotcIVKKNEi2vP7hveVZrMFgKPJJo915szOzf51/Jc/zhbV2Jfc+kiR5QrLNsqzEMJJ8O0hcM1kWlWUZKtQOOo69ZGdpmn4ofB12QsI3k1BoRtP8F7Gell0GnT6rrpJ4HOfzUiU1ww7o9HepAGI2juNHyeegw7Ja3FRA9iW5jv9slSl0WqD2rEYjF7Hy68E7gCPNORpjpk44sg2CYAg969JTxVoywYIXmlyfAS77jRPDZ8PZN5j3KfiEYeh2yG07wQN5P4g/d9H9Hf5ZMkHM/QO5NbCzh6IoJgbVI/iNBdrALnY8An9X+w9rpLPbA/sADga+JgSiAAAAAElFTkSuQmCC) 50% no-repeat;
}
.tile .brand > .name,
.tile .tile-status > .name {
position: absolute;
bottom:;
left:;
margin-bottom: 5px;
margin-left: 15px;
font-weight:;
font-size: 9pt;
font-smooth: always;
color: #ffffff;
}
.tile .brand > .name:hover,
.tile .tile-status > .name:hover {
color: #ffffff;
}
.tile .brand > .name > [class*=icon-],
.tile .tile-status > .name > [class*=icon-] {
font-size: 24px;
}
.tile .brand > .icon,
.tile .tile-status > .icon {
margin: 5px 15px;
width: 32px;
height: 32px;
}
.tile .brand > .icon > [class*=icon-],
.tile .tile-status > .icon > [class*=icon-] {
font-size: 32px;
}
.tile .brand > .icon > img,
.tile .tile-status > .icon > img {
width: 100%;
height: 100%;
}
.tile .brand > img ~ .text,
.tile .tile-status > img ~ .text {
position: absolute;
left: 60px;
width: auto;
}
.tile .brand > .text,
.tile .tile-status > .text {
position: relative;
left: 8px;
top: 5px;
right: 50px;
font-weight:;
font-size: 9pt;
font-smooth: always;
color: #000000;
color: #ffffff;
line-height: 14px;
width: 60%;
}
.tile .brand > .text:hover,
.tile .tile-status > .text:hover {
color: rgba(0, 0, 0, 0.8);
}
.tile .brand > .text:active,
.tile .tile-status > .text:active {
color: rgba(0, 0, 0, 0.4);
}
.tile .brand > .text:hover,
.tile .tile-status > .text:hover {
color: #ffffff;
}
.tile:hover {
outline: 3px #3a3a3a solid;
}
#imgdiv > span .token {
height: 18px;
float: right;
width: 100%;
right: 0px;
font-size: small;
text-align: right;
filter: alpha(Opacity=80);
-moz-opacity: 0.5;
opacity: 0.5;
background-color: #2d89ef;
}
#imgdiv > span .percentage-bar {
background-color: #fff;
}
.fileshow {
height: 800px;
padding: 15px 15px 15px 15px;
}
.selected {
border: 2px solid #2d89ef;
}
.selected::after {
border-left: 40px solid transparent;
border-top: 40px solid #2d89ef;
content: "\e176";
display: block;
height:;
position: absolute;
right:;
top:;
width:;
z-index:;
}
.selected::before {
color: #fff;
content: "\e013";
font-family: 'Glyphicons Halflings';
position: absolute;
right: 4px;
z-index:;
}
.overflowX {
margin: 0px;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
}
#imgdiv .tile {
width: 120px;
height: 120px;
}
#imgdiv .tile > img {
width: 120px;
height: 120px;
}
.img-thumbnail:hover {
border: 1px solid #00a300;
outline: 0 none;
}
.clearleft {
padding-left: 0px;
}
.padding15 {
padding: 15px;
}
2.js插件
/* 作者: 吾山散人 remoteplaces@hotmail.com * 说明: 基于HTML5+bootstrap的文件上传 http://www.cnblogs.com/Fyhong/p/4574509.html
* 版本1.0
* 参数:
* bgcolor: "bg-color-blue", -- 按钮背景颜色
* bdcolor: "border-color-lighten",--按钮边框
* fgcolor: "fg-color-white",--按钮字体颜色
* sendURL: "",--上传路径 必填
* filedivId: "filesview",--初始化的元素ID 必填
* Change: function () { },--选择文件事件
* ShowLoad: function () { },--显示缩略图事件
* Progress: function () { },--上传中
* Readysource: function () { }--上传完成
* accept:"image/gif,image/png,image/JPEG"--筛选文件格式
*/
(function ($) {
$.HBUploadFiles = function (params) { var filereaderList = [];
var deleItems = [];
var deleitemstemp = [];
params = $.extend({
bgcolor: "bg-color-blue",
bdcolor: "border-color-lighten",
fgcolor: "fg-color-white",
sendURL: "",
maxfilecount: 100,
filedivId: "filesview",
accept: "image/gif,image/png,image/JPEG",
Change: function () { },
ShowLoad: function () { },
Progress: function () { },
Readysource: function () { }
}, params);
//删除准备上传集合
function removeFile(id) {
var newfilelist = [];
for (var i = 0; i < filereaderList.length; i++) {
if (id != filereaderList[i][0]) {
newfilelist.push(filereaderList[i]);
}
}
filereaderList = newfilelist;
}
//删除数组中的数据
function removeItem(ary, key) {
var newary = [];
for (var i = 0; i < ary.length; i++) {
if (key != ary[i]) {
newary.push(ary[i]);
}
}
ary = newary;
return ary;
} function isBtnDisabled() {
var sum = $("#imgdiv > .tile").length - deleitemstemp.length;
sum = sum < 0 ? 0 : sum;
var count = $("#imgdiv > .selected").length - deleitemstemp.length;//display: none;
count = count < 0 ? 0 : count;
if (sum != count) {
$("#ckfile").find("span").removeClass("glyphicon-check").addClass("glyphicon-unchecked");
} else {
$("#ckfile").find("span").removeClass("glyphicon-unchecked").addClass("glyphicon-check");
}
if (sum == 0) {
$("#ckfile").addClass("disabled").attr("disabled", true);
} else {
$("#ckfile").removeClass("disabled").attr("disabled", false);
}
if (count == 0) {
$("#savefile,#delfile").addClass("disabled").attr("disabled", true);
} else {
$("#savefile,#delfile").removeClass("disabled").attr("disabled", false);
}
$("#ckmsg").text("总量:[" + sum + "]" + "/选中:[" + (count) + "]");
if (params.maxfilecount >= sum) {
$("#msg").addClass("fg-color-blue").removeClass("fg-color-red").text('最大浏览上传数量:[ ' + params.maxfilecount + ']')
} else {
$("#msg").addClass("fg-color-red").removeClass("fg-color-blue").text("达到了最大浏览上传量,请上传后在选择文件!")
}
isRevokeimg();
}
function getsize(size) {
var fileSize = "";
if (size > 1024 * 1024)
fileSize = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';
return fileSize;
} //显示隐藏最后一次删除按钮
function isRevokeimg() {
var sumcount = deleItems.length;
var count = deleitemstemp.length;
if (sumcount == 0) {
$("#revokeimg").hide(200);
deleitemstemp = [];
}
if (count > 0) {
$("#revokeimg").show(200);
} else {
$("#revokeimg").hide(200);
}
} var markup = [
'<div class="col-lg-12 paddingtop15 clearleft">',
'<button class=" ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + '" id="btnfile"> <span aria-hidden="true" class="glyphicon glyphicon-th-list"></span> 浏览图片</button>',
'<input style="display:none;" type="file" multiple="multiple" name="fileImage" id="fileImage" accept="' + params.accept + '" value="" />',
'<button disabled="disabled" id="savefile" class=" ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + '"> <span aria-hidden="true" class="glyphicon glyphicon-floppy-open"></span> 上传</button>',
'<button disabled="disabled" id="ckfile" class=" ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + ' disabled"> <span aria-hidden="true" class="glyphicon glyphicon-unchecked"></span> 全选</button>',
'<button disabled="disabled" id="delfile" class=" ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + ' disabled"><span aria-hidden="true" class="glyphicon glyphicon-trash"></span> 删除</button>',
' <span id="msg" class="fg-color-blue">最大浏览上传数量:[ ' + params.maxfilecount + ']</span>',
'<button style="display:none;" class="float-right bg-color-white fg-color-blue" id="revokeimg"><span class="glyphicon glyphicon-share-alt"></span> 撤销最后一次删除 </button>',
'</div>',
'<div id="imgdiv" class="col-lg-12 overflowX ' + params.bdcolor + " " + ' float-left fileshow">',
'</div>',
'<span class="float-right" id="ckmsg"></span>'
].join('');
$("#" + params.filedivId).append($(markup)).hide().fadeIn(); $("#btnfile").click(function () {
var count = $("#imgdiv > .tile").length - deleitemstemp.length;
if (params.maxfilecount >= count) {
$("#fileImage").click(); } else {
$("#msg").addClass("fg-color-red").removeClass("fg-color-blue").text("达到了最大浏览上传量,请上传后在选择文件!")
}
}); //上传文件
$("#fileImage").change(function () {
var files = $(this).get(0);
var isdel = false;
var newitems = [];
var newitemsmp = []; var filesum = files.files.length;
var count = $("#imgdiv > .tile").length - deleitemstemp.length;
if (params.maxfilecount >= count) {
var tmpcount = params.maxfilecount - count;
filesum = tmpcount - filesum > 0 ? filesum : tmpcount; } else {
$("#msg").addClass("fg-color-red").removeClass("fg-color-blue").text("达到了最大浏览上传量,请上传后在选择文件!")
return false;
} for (var i = 0; i < filesum; i++) { var file = files.files[i];
var id = file.name; //如果有同一个文件,将标记为删除的文件,显示出来,去掉删除标签;
var len = deleItems.length;
if (len > 0) {
//删除集合中的元素
for (var i = 0; i < len; i++) {
var dt = deleItems[i];
if (dt != id) {
newitems.push(dt)
} else {
isdel = true;
}
}
deleItems = newitems;
var llen = deleitemstemp.length;
//临时删除的元素
if (llen > 0) { for (var i = 0; i < llen; i++) {
var dtm = deleitemstemp[i];
if (dtm != id) {
newitemsmp.push(dtm);
}
}
deleitemstemp = newitemsmp;
}
isRevokeimg();
}
//如果有标记删除的,显示出来;
if (isdel) {
$("img[id='" + id + "']").parent().show(200);
isdel = false;
continue;
}
//如果已经存在的数据,显示出来
if ($("img[id='" + id + "']").length != 0) {
$("img[id='" + id + "']").parent().addClass("selected").show(200);
continue;
} var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function (f) {
return function (e) {
var urlData = this.result;
var img = $("<img></img>").attr({ "src": urlData, 'alt': f.name, 'id': f.name });
var spn = $("<span class='tile bg-color-lighten icon selected'></span>").append(img);
var brand = $("<span></span>").addClass("brand");
var spanbar = $("<span></span>").addClass("percentage-bar");
var bar = $("<span></span>").addClass("bar bg-color-blue");
var sizesapn = $("<span></span>").addClass("token").text(getsize(f.size));
brand.append(spanbar.append(bar));
brand.append(sizesapn);
spn.append(brand);
$(spn).click(function () {
$(this).toggleClass("selected");
isBtnDisabled();
});
$("#imgdiv").append(spn);
$("#ckfile").find("span").removeClass("glyphicon-unchecked").addClass("glyphicon-check");
filereaderList.push([f.name, f]);
isBtnDisabled();
params.ShowLoad();
};
params.Change();
})(file);
}
}); $("#ckfile").click(function () {
var ion = $(this).find("span");
if ($(ion).hasClass("glyphicon-check")) {
$(ion).removeClass("glyphicon-check").addClass("glyphicon-unchecked");
$("#imgdiv > .tile").removeClass("selected");
} else {
$(ion).removeClass("glyphicon-unchecked").addClass("glyphicon-check");
$("#imgdiv > .tile").addClass("selected");
}
isBtnDisabled();
});
$("#revokeimg").click(function () {
if (deleitemstemp.length == 0) {
return false;
}
for (var i = 0; i < deleitemstemp.length; i++) {
var id = deleitemstemp[i];
deleItems = removeItem(deleItems, id);
$("img[id='" + id + "']").parent().show(200);
}
deleitemstemp = [];
isBtnDisabled();
});
$("#delfile").click(function () {
var selectimg = $("#imgdiv > .selected");
if (selectimg.length == 0) {
return false;
}
deleitemstemp = [];
var delitem = [];
$.each(selectimg, function (index, item) {
var id = $(item).find("img").attr("id");
delitem.push(id);
deleitemstemp.push(id);
$(item).hide(250);
});
//清除掉不能恢复删除状态的图片,并且从准备上传集合中删除
for (var i = 0; i < deleItems.length; i++) {
$("img[id='" + deleItems[i] + "']").parent().remove();
removeFile(deleItems[i]);
}
deleItems = delitem;
isBtnDisabled();
});
$("#savefile").click(function () {
//去掉标识为删除的
//上传选中的文件
var ckpushItem = [];
var selectimg = $("#imgdiv > .selected");
if (selectimg.length == 0) {
return false;
}
var len = filereaderList.length;
$.each(selectimg, function (index, item) {
var id = $(item).find("img").attr("id"); for (var j = 0; j < len; j++) {
var iobj = filereaderList[j];
if (iobj[0] == id) { var idx = deleitemstemp.indexOf(iobj[0]);
if (idx < 0) {
ckpushItem.push(iobj);
}
}
}
});
for (var i = 0, itemfile; itemfile = ckpushItem[i]; i++) { (function (item) {
var id = item[0];
var file = item[1];
var xhr = new XMLHttpRequest(); //上传中
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var bl = ((e.loaded / e.total) * 100);
$("img[id='" + id + "']").parent().find(".bar").css("width", bl + "%");
$("img[id='" + id + "']").parent().find(".token").text(bl + "%");
params.Progress();
}
}, false);
//上传状态
xhr.onreadystatechange = (function (fif) {
return function (e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
removeFile(fif[0]);
$("img[id='" + fif[0] + "']").parent().hide("fast", function () {
$(this).remove();
isBtnDisabled();
params.Readysource(); });
} else if (xhr.status == 404) {
$("img[id='" + fif[0] + "']").parent().find(".token").text("404!"); } else {
$("img[id='" + fif[0] + "']").parent().find(".token").text(xhr.status + "!");
}
}
};
})(item);
var formdata = new FormData();
formdata.append("FileData", file);
xhr.open("POST", params.sendURL, true);
xhr.send(formdata);
})(itemfile);
}
});
}
})(jQuery);
3.后台:
public void SaveIFle(HttpPostedFileBase[] FileData)
{
foreach (var item in FileData)
{
_saveFile(item, "/Images/ABC", item.FileName); }
}
[NonAction]
private void _saveFile(HttpPostedFileBase postedFile, string filepath, string saveName)
{
string phyPath = Request.MapPath("~" + filepath + "/");
if (!Directory.Exists(phyPath))
{
Directory.CreateDirectory(phyPath);
}
try
{
postedFile.SaveAs(phyPath + saveName);
}
catch (Exception e)
{
throw new ApplicationException(e.Message); }
}
调用:
初始化:
fileshow.js中初始化
$(function () {
$.HBUploadFiles({
sendURL: "/FY/SaveIFle",
filedivId: "filesview"
});
});
<div class="row">
<div class="col-lg-6 bg-color-white " id="filesview"> </div> </div> @section scripts{ <script src="~/Scripts/Js/HBUploadFiles.js"></script>
<script src="~/Scripts/Js/fileshow.js"></script>
}
出处：http://www.cnblogs.com/fyhong
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。