原生js實現文件上傳並顯示進度條

背景

大部分web端業務系統都須要一個導入Excel功能，咱們須要實現文件的上傳，若是加上進度條，能夠提高用戶體驗

效果圖以下：

須要實現的功能點：

• 選擇文件上傳、支持拖拽文件
• 顯示上傳進度條

文件上傳

使用<input type='file' onchange='changeFile'>

文件預覽：讀取文件名稱、大小，使用onchange事件

function changeFile(){
     var file = event.target.files[0];
 }
 
複製代碼

使用ajax異步上傳，提交表單形式，使用H5的FormData對象

var form = new FormData();
form.append('name', 'xiaoqiu');
form.append('fileObj', file);
複製代碼

ajax提交文件

var xhr = new XMLHttpRequest();
xhr.open("post", 'http://localhost:5000/api/npoi/import', true);
xhr.send(form);     //提交表單數據

//文件傳至服務器完成事件
xhr.onload = function () {
    alert("上傳完成!");
};

//監聽上傳進度事件
xhr.upload.addEventListener('progress', handleProgress)

//上傳進度監聽處理
function handleProgress(e) {
    var progressBar = document.getElementById("progressBar");
    if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
    }
}
複製代碼

進度條使用的是H5提供的progress元素

<progress id="progressBar" value="0" max="100"></progress>
複製代碼

div實現拖拽上傳，依賴的事件：

• ondrop
• ondragover
• ondragleave

function dropFile(e) {
    event.stopPropagation();
    event.preventDefault();
    var files = event.dataTransfer.files; // FileList object.
    console.log(files);
}

function dragOver(e) {
    event.stopPropagation();
    event.preventDefault();
    isDragOver = true;
}

function dragLeave(e) {
    event.stopPropagation();
    event.preventDefault();
    isDragOver = false;
}

html代碼：
```html <div class="upload-file-panel"> <div class='upload-title'>【商品清單】導入：<a href='#'>點擊此處下載模版</a></div> <div class="upload-panel-body" onclick="clickSelFile()" ondrop="dropFile()" ondragover="dragOver()" ondragleave="dragLeave()"> <i class='fa fa-cloud-upload blue' style='font-size:2.5em;'></i> <input type="file" id="file" name="file" onchange="changeFile()" hidden="hidden"> <div style="color:#9b9b9b;">選擇或拖拽文件自動上傳，僅支持Excel文件</div> <progress id="progressBar" value="0" max="100"></progress> </div> <div class='filename'>文件名：<span style='color:#ff8800'>test.xlsx</span><span class='blue' style='float:right' title='文件大小' id='upload-fileSize'>123kb</span></div> <div> 文件更新時間：<span class='green'>2019-04-04 17:28:00</span> <span class='badge-rim bg-orange' style='float:right'>運行中</span> </div> <div class='upload-panel-notice'> 正在上傳... </div> </div> 複製代碼

最後，你也能夠封裝成一個Vue組件使用

<uploader file-title="商品清單"
          :visible.sync="showUploder"
          upload-url="http://localhost:8080/api/v1/product/import"
          hub-url="http://localhost:8080/chathub"
          template-url="../../templates/商品導入模板.xlsx"
          @before-upload="formDataInit"
          @on-close="closeUploader">
</uploader>
複製代碼

注：如上的Excel業務數據處理進度須要藉助websocket通訊實現，後文會進行補充