React 上傳進度條問題 原生js上傳 input type=“file”

canUpload: true,//是否可以上傳，初始值不可上傳，所以disabled為true
filename: '',//上傳文件的名稱
loading: false,//點擊上傳的時候出現加載圖標
fileList: [],//已上傳的文件列表
isNumber: true,//判斷數量是否為數字,
var file = document.getElementById("pic").files[0];
---------------------------------------------------------------------------------------------------------
    //新的上傳文件的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="";
        }
    }
---------------------------------------------------------------------------------------------------------
    //新的上傳文件的js代碼
    submitUpload() {
        this.setState({
            loading: true,
            // listener: true
        });
        var storage = window.sessionStorage;
        storage.setItem("listener", true)
        storage.setItem("first", true)
        // storage.setItem("timeout",6000)
        if (!this.state.isNumber) {
            message.error("請輸入正確的數字格式");
            return;
        }

        var here = this;
        var file = document.getElementById("pic").files[0];

        var reg = /[\u4e00-\u9fa5]/;
        // var jqXHR;
        if (reg.test(file.name.split(".zip")[0]) == false) {
            here.setState({ progressBar: true })
            //校驗名稱不能為漢字
            here.state.jqXHR = $.ajax({
                // url: this.uploadUrl+"?name=" + URLDecoder.decode(this.state.datasetName),
                url: this.uploadUrl + "?name=" + this.state.datasetName,
                type: "post",
                data: file,
                dataType: "json",
                processData: false,
                contentType: false,
                xhrFields: {
                    withCredentials: true // 這里設置了withCredentials
                },
                // timeout : this.state.timeout,//設置超時時間
                // timeout : 6000,
                timeout: storage.getItem("timeout"),
                //--------------------------------------------{/*2222222 */}
                beforeSend: function () {
                    notification['info']({
                        message: '提示',
                        description: '現在開始上傳文件！',
                    });
                },
                xhr: function () {
                    var storage = window.sessionStorage;
                    if (storage.getItem("first") == "true") {
                        if (here.state.myxhr.upload) {                           //上傳數據時要判斷是否有upload
                            var storage = window.sessionStorage;
                            // setTimeout (function(){
                            if (storage.getItem("listener") == "true") {
                                // wi
                                var heres = here;
                                here.state.myxhr.upload.addEventListener('progress', heres.uploadssa.bind(heres), false);

                                here.state.myxhr.upload.addEventListener('load', function (e) {
                                }, false);
                            } else {
                                here.state.myxhr.upload.removeEventListener("progress", uploads, false)

                            }
                            // },2000);

                        } else {
                        }
                    } else {
                    }
                    return here.state.myxhr;
                },
                //--------------------------------------------
                success: function (res) {
                    if (res) {
                        if (res.status == "OK") {
                            here.uploadSuccess(); //上傳成功之后的操作
                            //延遲3秒刷新列表
                            setTimeout(function () {
                                message.success("上傳成功！");
                                var fileList = here.state.fileList;
                                fileList.push(here.state.filename);
                                here.setState({
                                    loading: false,
                                    fileList: fileList,
                                    // loading: true
                                    visible: false,
                                    uploadBtnssa: false
                                });

                                here.getTrainDataSetList();
                                here.render();
                            }, 2000);
                        } else {
                            message.error(res.message);
                            here.setState({
                                loading: false,
                                visible: false
                            });
                            here.getTrainDataSetList();
                            here.render();
                        }
                    }
                },
                error: function (err) {
                    notification["error"]({
                        message: here.state.filename + "文件上傳失敗",
                        description: ""
                    });
                    here.setState({ loading: false });
                    // here.getTrainDataSetList();
                    here.render();
                }
            });
        } else {
            message.error("壓縮包文件名中不能有漢字");
            here.setState({ loading: false });
            return;
        }
    }
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    //判斷文件選擇框的值
    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
                });
            }
        }
    }

　　

用的antd progres進度條組件
<Progress percent={this.state.percent} status = {this.state.percent< 100 ? "active": this.state.percent == 100 ? "success": "error"} showInfo={this.state.percent == 100 ? false : true} style ={{display: this.state.progressBar == true? "block": "none"}}/>
---------------------------------------------------------------------------------
用的標簽
<input type="file" name="file" id="pic" onChange={this.fileInput.bind(this)} ref="referenceUpload"/>
---------------------------------------------------------------------------------
獲取上傳的文件用
document.getElementById("pic").files[0];
---------------------------------------------------------------------------------
遇到的兩個問題
第1個問題 
上傳的時候 第2次點擊同一個文件 不顯示到頁面上 input標簽的onchange事件不執行

解決
$("#pic").replaceWith('<input type="file" name="file" className = "uploadssa" id="pic"/>');
        $("#pic").on("change", function () {
            _this.fileInput(_this)
        })

replaceWith JQuery替換標簽方法 替換掉頁面原有的input標簽 新標簽可以跟舊input標簽一樣 事件得通過on事件添加才起效果

附fileInput事件代碼
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
                });
            }
        }
}
---------------------------------------------------------------------------------
第2個問題
xhr對象 刪除事件監聽 不能使用
因為上傳用的是xhr對象 這個對象有好幾個自己的上傳函數 有監聽進度多少的(progress事件監聽) 有監聽完成的(load事件監聽) 有監聽超時的 這個xhr對象在jquery ajax里寫的 直接停止ajax 就可以停止上傳了 給jquery ajax賦值給一個全局變量 這樣在其他方法里也能用這個ajax了 

終止jquery ajax請求 用abort方法

state: {
myxhr: $.ajaxSettings.xhr()
}

here.state.myxhr.upload.addEventListener('progress', heres.uploadssa.bind(heres), false);

here.state.myxhr.upload.addEventListener('load', function (e) {}, false);

uploadssa(e) {
        if (e.lengthComputable) {
            let percent = Math.floor((e.loaded / e.total) * 100);

            let upload = this.state.upload;
            upload.progress.loaded = e.loaded;
            upload.progress.total = e.total;
            upload.progress.percentage = percent;
            this.state.upload = upload;
            this.setState({
                upload: upload,
                percent: percent
            });
        }
}

終止ajax請求 就可以終止xhr對象的事件監聽了
if (this.state.percent != null) {
   this.state.jqXHR.abort();
}