在input中html給我們一個 type file用來做文件上傳的功能，比如

但是這樣的樣式，實在難看，在開發的時候看了layui和bootstrap的點擊上傳，都很不錯。

前者的調用方式和js的差別太大，後者需要引入bootstrap fileinput.js 我都不是很滿意，

後來寫了一個原生的js來調用，話說我還是引用了layui的css樣式，因為確實不錯

看下代碼

1     <input type="file" onchange="upload()" style="display:none" id="file-input" />
2     <button 
 
onclick=‘selectFile()‘>上傳</button>

這是沒有引入layui的類之前的html，他的input type file是默認隱藏的，我們可以在

按鈕上模擬input的點擊事件

var inputBox = document.getElementById("file-input");
        
        function selectFile(){
            inputBox.click()
        }        

點擊之後，input就相當於被點擊，開始上傳文件，當上傳文件的時候，input上綁定的onchange();就開始生效了

這是一個加載的函數

function upload(){
        //alert(123);
            var file = inputBox.files[0]
            if(! file){
                alert(‘請選擇文件‘)
                return
            }
            var form = new FormData()
            form.append(‘file‘,file)
            var xhr = new XMLHttpRequest();
            xhr.open(
 
"post", ‘../../api/receiveOptionQuestion‘, true);      
            xhr.onload = function () {   
                alert(xhr.responseText);
            };
            xhr.upload.addEventListener("progress", function(e){
                console.log(e.loaded / e.total * 100)
            }, false);
            xhr.send(form);
        }

在open方法中定義上傳的接口，返回數據為responseText

加載數據的時候，綁定一個進度的事件，可以由e.loaded/e.total*100+"%"得到當前的進度（百分數）

最後傳值

關於自定義一個上傳的file按鈕