简单的上传插件（带进度条）

 这是一个简单的带进度条的插件，容易上手，还可以自己根据需求修改，也许会用漏洞，可以互相交流。

插件

//上传
function Updata(id,url) {
    if(!(id)||id==""){
        alert("id不能为空");
        return
    }
    if(!(url)||url==""){
        alert("url不能为空");
        return
    }
    var my=this;

   
    this.url = url;//上传文件的地址(必填)
    this.limit={size:-1,type:""};//上传文件的大小类型限如{size:5000,type:"png,jpg"},限制大小为5k类型为png，jpg
    this.id = id;//上传file的id(必填)
    this.data = "";
    this.btnName = "本地上传";//点击上传按钮文字(不添添加本地上传)
    this.btnClass="";//点击上传按钮样式class，id(不添添加默认样式)
    this.btnSubmit="";//提交按钮class，id(不添默认自动上传)
    this.checked= true;//是否符合限制条件
    this.input=$("#"+  this.id);
    this.box=$("#updataBox-"+  this.id);
    this.last="";
    this.display="block";
    //监听上传进度
    this.progress=function (evt) {
        var input=$("#"+my.id);
        var box=$("#updataBox-"+my.id);
        var cancle=box.find(".updataBox-cancle");
        if (!(  $(".input-file_lable .fileUp-loading").get(0))) {
            $(".input-file_lable").html('<img src="/assets/images/h5/ico_loading.gif" class="fileUp-loading">')
        }
        var loaded = evt.loaded;                  //已经上传大小情况
        var tot = evt.total;                      //附件总大小
        var per = Math.floor(100 * loaded / tot);      //已经上传的百分比
        var bili = per + "%";
        box.find(".progress-text").html(bili);
        box.find(".progress-bar").css("width", bili);
        box.find(".progress-updata").css("display", "inline-block");
        cancle.css("display", "inline-block");
        if(bili=="100%"){
            box.find(".progress-updata").css("display", "none");
            cancle.css("display", "none");
        }
    }
}

Updata.prototype = {
    //校验是否文件是否符合限制条件
    check:function () {
        var file = this.input.get(0).files[0];

        var  size=file.size;
        // if(file.type==""){
            var  types=file.name.split(".");
            var  type=types[types.length-1];
        // }else{
        //     var  type=file.type.split("/")[1];
        // }

        var limitSize=this.limit.size;
        var limitTypeUp=this.limit.type.toUpperCase();
        var limitTypeLo=this.limit.type.toLowerCase();
        var limitStype=(limitTypeUp.split(",")).concat(limitTypeLo.split(",") );
        console.log(limitStype);
        if(size>limitSize&&this.limit.size!=-1){
            this.checked= false;
            alert("上传的文件太大，超出限制");
            this.input.val('');
            return false
        }else if(limitStype.indexOf(type)==-1&&this.limit.type!=""){
            this.checked= false;
            this.input.val('');
            alert("上传的文件类型不对")
            return false
        }else{
            this.checked= true;
            return true;
        }

    },
    lableDisabled:function () {
        var lableBoxSh=this.box.find(".updataBox-lable_shadow")
        var lableBox=this.box.find(".updataBox-lable");
        if( lableBoxSh.css("display")=="none"){
            lableBoxSh.width(lableBox.width()+22)
            lableBoxSh.height(lableBox.height()+2)
            lableBoxSh.css({"left":(this.box.offset().left-lableBox.offset().left),"top":(this.box.offset().top-lableBox.offset().top)})
            lableBoxSh.show();
        }else{
            lableBoxSh.hide();
        }

    },
    //文件上传成功回掉
    success:function (data) {

    },
    //文件开始上传
    onUpLoad:function (data) {

    },
    cancel:function (me,oReq) {
        oReq.abort();
        me.box.find(".progress-updata").css("display", "none");
        me.box.find(".updataBox-cancle").css("display", "none");;
        me.input.val("");

    },
    //文件上传
    submit:function () {
        this.lableDisabled();
        this.onUpLoad();
        this.box.find(".updataBox-lable_shadow").show();
        var pic = this.input.get(0).files[0];
        var me=this;
        var formData = new FormData();
        formData.append("file", pic);
        formData.append('data', this.data);
        var oReq = new XMLHttpRequest();
        oReq.open("POST", this.url, true);
      oReq.upload.addEventListener("progress", me.progress,me, false);

        oReq.onreadystatechange = function () {
            if (oReq.readyState == 4 ) {
                if (oReq.status === 200 || oReq.status == 304) {// 304未修改
                    me.lableDisabled();
                    me.success(oReq.responseText);

                } else {
                    me.lableDisabled();
                    console.log("Error", oReq.statusText);
                }
            }

        };
        oReq.send(formData);
        me.box.find(".updataBox-cancle").unbind("click").bind("click",function () {
           me.cancel(me,oReq);
        })

    },
     //初始化上传组件
    init:function () {
        if(this.display!="block"){
            var html='<div class="updataBox" style="display: '+this.display+'" id="updataBox-'+this.id+'">'
        }else{
            var html='<div class="updataBox" id="updataBox-'+this.id+'">'
        }

        if( this.btnClass==""){
            html+='<label class="updataBox-lable  updataBox-lable_main" for="'+this.id+'">'+this.btnName+'</label>'
        }else{
            html+='<label class="updataBox-lable '+this.btnClass+'" for="'+this.id+'">'+this.btnName+'</label>'
        }
        html+='<div class="updataBox-lable_shadow"></div> <div class="progress-updata">'
        html+='<div class="progress">'
        html+='   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">'
        html+=' <span class="progress-text">0%</span>'
        html+='</div>'
        html+='</div>'
        html+='</div>'
        html+='<div class="updataBox-cancle">取消</div>'
        html+='</div>'
        this.input.after(html);
        this.input.hide();
        this.input=$("#"+this.id);
        this.box=$("#updataBox-"+this.id);
        var me=this;
        if(this.btnSubmit==""){
            this.input.unbind("change").bind("change",function () {
                if(me.input.get(0).files.length!=0){
                    this.last=me.input.get(0).files[0].name;
                    if( me.check()){
                        me.submit();
                    }
                }
            })
        }else{
            this.input.unbind("change").bind("change",function () {
                if(me.input.get(0).files.length!=0){
                    this.last=me.input.get(0).files[0].name;
                    me.check();
                }

            })
            this.btnSubmit.unbind("click").bind("click",function () {
                if(me.input.get(0).files.length!=0){
                    alert("请先选择文件")
                    if(me.checked){
                        me.submit();
                    }
                }


            })
        }
    }


}

css

.updataBox{
    min-height: 35px;
    position: relative;
}
.updataBox .updataBox-lable{
    display: inline-block;
}
.updataBox .updataBox-lable_shadow{
   position: absolute;
    background: #fff;
    opacity: 0.3;
    display: none;
}
.updataBox .updataBox-lable_main{
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    background: #fff;
    color: #666;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
    cursor: pointer;
}
.updataBox .progress-updata{
    width: 200px;
    height: 35px;
    vertical-align: middle;
    padding-top: 5px;
    margin-left:20px ;
    display: none;
}
.updataBox .progress-updata .progress{
    height: 20px;
    border-radius: 10px;
    background: #e4e8f1;
}
.updataBox .progress-updata .progress-br{
   background: #20a0ff;
    line-height: 20px;
    width: 0;
    color: #fff;
    text-align: center;
}
.updataBox .updataBox-cancle{
    width: 60px;
    height: 35px;
    vertical-align: middle;
     line-height: 35px;
    margin-left:20px ;
    display: none;
    color: red;
    cursor: pointer;
}

调用

var updata=new Updata("input的id","地址");
updata.limit={size:20000000,type:"PPT,PPTX,DOC,DOCX,PDF,JPG,JPEG,PNG,GIF"};//上传文件限制
updata.btnName="本地上传";//点击上传按钮文字
updata.btnClass="btn-newdefaul";//按钮样式
updata.display="inline-block";//按钮默认为块级元素，可修改
updata.success=function (data) {//文件上传成功回掉
   
};
updata.init();//最后初始化

效果