React 上传进度条问题

   canUpload: true,//是否可以上传,初始值不可上传,所以disabled为true
        filename: '',//上传文件的名称
        loading: false,//点击上传的时候出现加载图标
        fileList: [],//已上传的文件列表
        isNumber: true,//判断数量是否为数字,
 
    //新的上传文件的js代码
    submitUpload(){
        if(!this.state.isNumber){
            message.error("请输入正确的数字格式");
            return
        }
        this.setState({ loading: true });
        var here = this;
        var file=document.getElementById('pic').files[0];
        // var decodeStr = URLDecoder.decode(this.state.datasetName);
        // decodeStr = this.state.datasetName;
        $.ajax({ 
            // url: this.uploadUrl+"?name=" + URLDecoder.decode(this.state.datasetName), 
            url: this.uploadUrl+"?name=" + this.state.datasetName,
            // url: ajax.shangchuanshu(decodeStr),
            type: "post",
            data: file,     
            processData: false, 
            contentType: false, 
            success: function(res) { 
                if(res){ 

                    if(res.status == "OK"){
                        here.uploadSuccess();//上传成功之后的操作
                        //延迟3秒刷新列表
                        setTimeout(function(){
                            
                            here.getTrainDataSetList();

                            message.success("上传成功!");
                            var fileList = here.state.fileList;
                            fileList.push(here.state.filename);
                            here.setState({loading: false,fileList:fileList});
                        },2000);
                    }else{
                        message.error(res.message);
                        here.setState({loading: false});
                    }
                    
                    
                    
                } 
            }, 
            error:function(err){ 
                notification['error']({
                    message: here.state.filename+'文件上传失败',
                    description: ''
                });
                here.setState({loading: false});
            }
        });
    }
    //判断文件选择框的值
    fileInput(e){
        var file=document.getElementById('pic').files[0];
        var dataSetName=file.name.split(".zip")[0];
        var filename = file.name;
        if(filename===''){
            document.getElementById("fileTips").innerHTML="请选择要上传的文件";
        }else{
            document.getElementById("fileTips").innerHTML="";
            var fileTypeArr = filename.split(".");
            var fileType = fileTypeArr[fileTypeArr.length-1];
        }
        if(fileType!='zip'){
            document.getElementById("fileTips").innerHTML="只能上传zip文件";
            this.setState({canUpload: true,choiceFile:'请选择要上传的文件',datasetName:''});//当选择上传的文件不合法后,上传按钮的disabled为true
        }else{
            this.getDatasetsName(file.name);
            if(!this.state.isNumber){
                message.error("请输入正确的数字格式");
                this.setState({
                    canUpload: true,
                    datasetName:'',
                    choiceFile:'请选择要上传的文件',
                });//当选择上传的文件合法后,上传按钮的disabled为false
            }else{
                this.setState({
                    canUpload: false,
                    choiceFile:filename,
                    datasetName:dataSetName,
                    filename: filename
                });
            }
        }   
    }
 
 
 
    dataSetNumBlur(){
        var regTest = /.*[^1-9]+.*$/;//是否存在除了数字之外的其他字符,为true,则不是数字
        var isnum = regTest.test(this.state.datasetNum);
        if(isnum){
            this.setState({isNumber: false});//上传按钮不可点击
            document.getElementById("dataSetNum").innerHTML="请输入数字";
        }else{
            this.setState({isNumber: true});
            document.getElementById("dataSetNum").innerHTML="";
        }
    }
 

猜你喜欢

转载自www.cnblogs.com/zhanglanzuopin/p/12604362.html