按钮上传文件js

function upload(obj,callback,url){ //obj 元素 callback回调方法,url 请求的url
    var maxLargeSize = 209715200;//200M
    var num=0;
    try{
        var url=newUrl;
        var $this=$(obj);
        var file=$($this).find(":file");
        var accept="application/vnd.ms-excel";//设置 可以选择什么文件
        if($(file).length<1){

            file=$("<input type='file' class='click f-file ' style='display: none'/>");
            if(accept){
                $(file).attr("accept",accept);
            }
            $(file).on("click",function(event){
                event.stopPropagation();
            });
            $($this).append(file);

            $(file).on("change",function(e){
                var f = e.target.files;
                if(f[0].size > maxLargeSize){
                    $(obj).append('<div class="upload-cover"><p>请上传200M以内的文件</p><div class="s-transition upload-cover-up"></div><div class="s-transition upload-cover-down"></div></div>');
                    return;
                }
              /*  $(obj).append('<div class="upload-cover"><p>0%</p><div class="s-transition upload-cover-up"></div><div class="s-transition upload-cover-down"></div></div>');*/
                if(f[0]){
                    if(f[0].type.indexOf("image")>-1){
                        var reader = new FileReader();
                        reader.onload=function(){
                            $(obj).find("img").attr("src",this.result);
                        };
                        reader.readAsDataURL(f[0]);
                    }
                }

                var form =$('<form method="post" enctype="multipart/form-data" action="'+url+'"></form>').appendTo("body");
                $(form).append($(file).attr("name","uploadFile"));
                var onprogress= function (evt){
                    var loaded = evt.loaded;     //已经上传大小情况
                    var tot = evt.total;      //附件总大小
                    var per = Math.floor(100*loaded/tot);  //已经上传的百分比
                    per=Math.min(99,per);
                    $(obj).find(".upload-cover p").html(per+"%");
                    $(obj).find(".upload-cover .upload-cover-up").css({
                        height:(100-per)+"%"
                    });
                    $(obj).find(".upload-cover .upload-cover-down").css({
                        height:per+"%"
                    });
                    $("#son").html( per +"%" );
                    $("#son").css("width" , per +"%");
                };
                $(form).ajaxSubmit({
                    success:function(data){
                        
                    },
                    xhr: function(){
                        var xhr = $.ajaxSettings.xhr();
                        if(onprogress && xhr.upload) {
                            xhr.upload.addEventListener("progress" , onprogress, false);
                            return xhr;
                        }
                    },
                    complete: function (XHR, TS) {
                        XHR = null;
                        // $(obj).find(".upload-cover").remove();
                    }
                });
            });
        }
    }catch(e){
        console.info(e);
    }
    return file.click();

}
调用
$(".f-uploadExcel").on("click",function(event){
    upload(this,function(obj,msg){},uploadUrl);
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值