webUploader:支持IE8文件可点击多选（xls,xlsx），带删除功能

一、下载：http://fex.baidu.com/webuploader/
二、IE8:低版本浏览器的flash版本过低，会报错。

  解决方法：①   https://www.flash.cn/    下载新版flash

                    ②   提醒升级：webuploader.js修改    
                     this.flashExec = function( comp, fn ) {
            						var flash = me.getFlash(),
                						  args = Base.slice( arguments, 2 );
            						try{
                						return flash.exec( this.uid, comp, fn, args );
            						}catch(err){
                						window.alert('请升级flash版本')
           							 }
       						 };

三、引入CSS、JS

<link rel="stylesheet" type="text/css" href="webuploader.css">
<script type="text/javascript" src="webuploader.js"></script>

四、HTML

<div id="uploader" class="wu-example clearfix">
          <div id="thelist" class="uploader-list clearfix" style="width:500px;"></div>
          <div class="btns">
                 <div id="picker">选择文件</div>
                 <button id="ctlBtn" class="btn-white btn-color-white btn-pl-upload">开始上传</button>
           </div>
</div>

五、改变样式（我自己写的样式，让隐藏的input框变大，IE8无法点击很大一部分原因是因为input框太小）

#thelist{
    max-height: 180px;
    overflow-y: auto !important;
    paddring-right:30px;
}
.webuploader-pick{
    padding: 8px 16px !important;
    font-size: 16px;
    margin-left: 250px;
    margin-left: 300px;
    margin-top: 80px;
    float: left;
    background-color: #1890ff;
    margin-top: 80px;
}
.webuploader-pick+div{                                                                 //就是这个，让他变大，不好调的给个背景色
    width: 90px !important;
    height: 36px !important;
    left: 300px !important;
    top: 80px !important;
}
.btns .btn-upload{
    margin-top: 80px;
}
.uploader-list{
    margin: 20px auto 0;
}

#filePicker div:nth-child(2){
    width:100%!important;height:100%!important;
}
.item{
    margin-top: 10px;
    text-align: center;
}

.webuploader-element-invisible {
    position: absolute !important;
    left: -150px !important;
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

六、初始化

var $list=$("#thelist");
    var uploader = WebUploader.create({
        // swf文件路径
        swf: "XXX",
        // 文件接收服务端。
        server: 'XXX',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        //去重
        duplicate: false,
        //限制文件大小
        chunked: false,//开始分片上传
        chunkSize: 1024,//每一片的大小
        isProgress:true, //是否展示进度条
        // fileSingleSizeLimit: 1024,//单位(字节B)
        //可上传文件的类型
        accept: {
            extensions: 'xls,xlsx,jpg', // 允许的文件后缀，不带点，多个用逗号分割，这里支持老版的Excel和新版的
            mimeTypes: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        }
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $("#thelist").css({"height":"180px","border":"none"});
        $("#thelist").append( '<div id="' + file.id + '" class="item">' +
            '<div class="info fl mb-12" style="width:70%;text-align:left;">' + file.name + '</div>' +
            '<div class="webuploadDelbtn fl text-blue mb-12" style="width:28%">删除</div>' +
            '<div class="state mb-12">等待上传...</div>' + 
            '</div>'
        );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        $(".webuploadDelbtn").hide();
        var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress active progress-bar-info progress-striped ">' +
            '<div class="progress-bar text-center " role="progressbar" style="width: 0%">' +
            '</div>' +
            '</div>').appendTo( $li ).children(".progress").children('.progress-bar');
        }
    
        $li.children('.state').text('上传中').css({"text-align":"right","color":"#333"});
        $li.children('.progress').css( 'width', parseInt(percentage * 100)+ '%' );
        $percent.html(parseInt(percentage * 100)+ '%' );
    });
    //请求发送成功后
    uploader.on( 'uploadSuccess', function( file , response ) {
        if (response.status !== 200) {
            $( '#'+file.id ).children('.state').text(response.message).css({"text-align":"right","color":"red"});
        } else {
            $( '#'+file.id ).children('.state').text('已上传').css({"text-align":"right","color":"#333"});
        }
    });
    //上传错误
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).children('.state').text('上传出错').css({"text-align":"right","color":"red"});
    });
    //上传完成后，进度条消失
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).children('.progress').fadeOut();
    });
    uploader.on('uploadFinished', function () {
        uploader.reset();
    });
    //删除
    $list.on("click", ".webuploadDelbtn", function () {
        var $ele = $(this);
        var id = $ele.parent().attr("id");

        var file = uploader.getFile(id);
        uploader.removeFile(file,true);  
    }); `在这里插入代码片`

    //删除时执行的方法
    uploader.on('fileDequeued', function (file) {
        $(file.id).remove();
        $('#'+file.id).hide();   
    });
    $("#ctlBtn").bind('click', function() {
        uploader.options.formData = {"uuid": "234124"};
        uploader.upload();
    });
    //清空（随便给个清空按钮，让插件重置并清空文件）
    $("XXX").bind('click', function () {
        uploader.reset();
        $("#thelist").empty();
    });

七、效果