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

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

插件

//上传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();//最后初始化

效果