webupload 上传插件 完美版 - 拿走直接用

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

由于最近，我们产品web端口 ，涉及批量图片上传（你懂得， 商品嘛，都玩吐了），然后自己写了一个半成品，后来

各种体验问题，然后一想那么不是傻么？ 这么多上传插件。

然后，那就烂大街的  webupload 呗，虽说我是 百度黑，不过百度确实有那么几个良心插件还是不错的 。

现在入正题，由于 webupload   功能强大，配置繁多，不过相对还是很好应用，不过遇到的问题也不少，供大家参考 

，最好只支持IE8以上，不然自己找虐，别找我额！

直接上效果 上代码吧，里面也都有注释，你们自己理解下载就行了，只需要配合 api 和我的代码 改相应的 css 和上传地址 就可以无缝对接

HTML： 

1. <div id="uploader-demo" class="controls">
2.                     <div class="uploader-list fileList"> </div>
3.                     <div class="filePicker">添加商品图册
4.                         <br>最多 5 张
5.                     </div>
6.                 </div>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

css：

   
   
.webuploader-container {
    position: relative;
    float: left;
}
.webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
.webuploader-pick {
    display: inline-block;
    cursor: pointer;
    background: #fafafa;
    padding: 10px 15px;
    color: #666;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
    float: left;
    width: 128px;
    height: 88px;
    position: relative;
    border: 1px solid #d6dee3;
    overflow: hidden;
    padding-top: 60px;
}
.webuploader-pick-hover {
    background: #00A3C6;
    color: #fff;
}
.webuploader-pick-disable {
    opacity: 0.6;
    pointer-events: none;
}
/*demo样式*/
#picker {
    display: inline-block;
    line-height: 1.428571429;
    vertical-align: middle;
    margin: 0 12px 0 0;
}
#picker .webuploader-pick {
    padding: 6px 12px;
    display: block;
}
#uploader-demo .thumbnail {
    width: 150px;
    height: 150px;
    overflow: hidden;
}
#uploader-demo .thumbnail img {
    width: 100%;
}
.uploader-list {
    /*width: 100%;*/
    overflow: hidden;
    float: left;
}
.file-item {
    float: left;
    position: relative;
    margin: 0 20px 20px 0;
    padding: 5px;
}
.file-item .error {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    background: red;
    color: white;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 23px;
}
.file-item .info {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    height: 20px;
    line-height: 20px;
    text-indent: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    z-index: 10;
}
/* 上次成功*/
.upload-state-done:after {
    content: "\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}
/*进度条*/
.file-item .progress {
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 3px;
    left: 4px;
    height: 4px;
    overflow: hidden;
    z-index: <
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow