Flask + H5 從桌面拖拽文件上傳到後臺

時間 2019-11-08

標籤 flask h5 桌面文件上傳後臺欄目 Python 简体版

原文原文鏈接

拖拽上傳文件

從桌面拖拽圖片到紅色區域

這裏以上傳圖片爲例，若是想要上傳 .txt 文件等。可使用 FileReader.readAsText(fs[0], 'utf-8')的方法讀取文件內容，從而展示到頁面上。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖拽上傳文件</title>
  <style>
    li{
      list-style: none;
      width: 100px;
      height: 30px;
      background: yellow;
      margin: 10px;   
    }
    #div1{
      width: 200px;
      height: 200px;
      background: red;
      margin: 200px;
    }
  </style>
</head>
<body>
  <div id='div1'>將文件拖拽到此區域</div>
  <ul id='ul1'></ul>
  <script>
    window.onload = function(){
      var oDiv  = document.getElementById('div1');
      var oUl  = document.getElementById('ul1');
      var xhr;
      if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp")
      }

      document.ondragover = function(ev){ ev.preventDefault() } // 阻止文件拖拽到oDiv之外的地方會打開文件
      document.ondrop = function(ev){ ev.preventDefault() }     // 阻止文件拖拽到oDiv之外的地方會打開文件

      oDiv.ondragenter = function(ev){
        this.innerHTML = '釋放上傳';
      }
      oDiv.ondragleave = function(ev){
        this.innerHTML = '將文件拖拽到此區域';
      }
      oDiv.ondragover = function(ev){
        ev.preventDefault()
      }
      oDiv.ondrop = function(ev){    // 想要出發 ondrop 事件，必須在 ondragover 阻止默認事件
        this.style.background = 'pink'
        ev.preventDefault();         // 阻止默認事件：瀏覽器打開文件
        
        var fs = ev.dataTransfer.files;
        var fd = new FileReader();   // 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件
        fd.readAsDataURL(fs[0]);     // 讀取文件, 讀取成功觸發 onload 函數。

        fd.onload = function(){      // 讀取文件成功後將文件展現到頁面
          var oLi = document.createElement('li');
          var oImg = document.createElement('img');
          oImg.src = this.result;
          oLi.appendChild(oImg);
          oUl.appendChild(oLi);

          xhr.onreadystatechange = function(){
            if(xhr.status == 200 && xhr.readyState == 4){
              //  
            }
          }
          xhr.open('POST','/upload_file_base64/')
          xhr.send( JSON.stringify({ img:this.result }) )  // 上傳的是 base64 格式的二進制碼
        }
      }
    }
  </script>
</body>
</html>

頁面截圖 (已經能夠展現拖拽進來的圖片)

將文件保存到後臺

# app.py

from flask import Flask, render_template, request, redirect, url_for
import os
import base64

app = Flask(__name__)

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


@app.route('/upload_file_base64/', methods=['POST','GET'])
def upload_file_base64():
  if request.method == 'POST':
    data_json=request.get_data()

    # 將二進制轉換成字符串
    if type(data_json) == bytes:
      data_json = data_json.decode('utf8')

    # 刪除前面的 'data:image/png;base64,'   當時這裏出錯，弄了好長時間 -. -！
    img_data = data_json.split(',')[1];        

    # 用base64.b64decode()轉化
    f = open('test.jpg','wb') 
    f.write(base64.b64decode(img_data))  
    f.close()  

    return redirect(url_for('index'))
  return render_template('index.html')

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。