Flask + H5 从桌面拖拽文件上传到后台

OpsDevOps

2019-07-01

拖拽上传文件

从桌面拖拽图片到红色区域

这里以上传图片为例，如果想要上传 .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>

页面截图 (已经可以展示拖拽进来的图片)

Flask + H5 从桌面拖拽文件上传到后台

将文件保存到后台

# 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')

var flask