MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

场景: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>&nbsp;&nbsp; 浏览图片</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>&nbsp;&nbsp; 上传</button>',
            '<button  disabled="disabled" id="ckfile" class="  ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + ' disabled"> <span aria-hidden="true" class="glyphicon glyphicon-unchecked"></span> &nbsp;&nbsp;全选</button>',
            '<button  disabled="disabled" id="delfile" class=" ' + params.bgcolor + " " + params.bdcolor + " " + params.fgcolor + ' disabled"><span aria-hidden="true" class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</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> &nbsp;&nbsp;撤销最后一次删除 </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

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。