flask+原生ajax實現上傳和下載進度數值顯示

注意：本文代碼只提供進度數值顯示，未實現進度條的顯示

一、下載進度

<div class="schedule">0</div>
  <button onclick="download()">下載</button>
  <script>
    // 要設置爲slow 3G才能看得到明顯的效果
    const schedule = document.querySelector(".schedule");
    function download() {
      const xhr = new XMLHttpRequest();
      const downloadUrl = './img/Scenery.jpg';
      xhr.open('GET', downloadUrl, true);
      xhr.addEventListener('progress', function (event) {
        if (event.lengthComputable) {
        // lengthComputable判斷所關聯的資源是否具有可以計算的長度。否則 ，ProgressEvent.total 屬性將是一個無意義的值。
          let percentComplete = event.loaded / event.total; // 計算下載進度（比例）
          schedule.innerText = percentComplete;
        }
      }, false);
      xhr.send();
    }
  </script>

二、上傳進度

JS代碼

<div>
    <input type="file" name="f" id="f" />
    <button id="upload-btn" onclick="upload()">上傳</button>
  </div>
  <script>
    function upload() {
      const f = document.querySelector('#f');
      console.dir(f);
      const fdata = new FormData();
      fdata.append('file', f.files[0]);
      $post('/ufile', fdata)
    }

    function $post(url, data) {
      const xhr = new XMLHttpRequest();
      xhr.open('post', url, true);
      xhr.upload.addEventListener("progress", function (e) { // 也可以用ponprogress進行監聽
        if (e.lengthComputable) {
          let percentComplete = e.loaded / e.total; // 計算上傳進度（比例）
          console.log(percentComplete);
        }
      })
      xhr.send(data);
    }
  </script>

Python代碼

app.py

from flask import Flask, render_template, request
from os import path
import time
import re

u_path = path.dirname(__file__)
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/ufile', methods=['post'])
def ufile():
    try:
        file = request.files['file']
        r = re.search(r'(\.\S+)', file.filename)
        fn = ""
        if(r != None):
            fn = r.group()
            file.save(u_path + '/static/file/' + str(time.time())+fn) # 沒有判斷文件夾是否存在，需自己先創建一個
            return 'success'
    except Exception as e:
        print(e)
        return 'fail'


if __name__ == '__main__':
    app.run(debug=True)

我的主頁：https://blog.csdn.net/qq_29750277，有關於前端（Vue、electron...）、Python等