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

whinc 發布于2019-08-23 17:06 / 2882人閱讀

摘要：拖拽上傳文件從桌面拖拽圖片到紅色區域這里以上傳圖片為例，如果想要上傳文件等。可以使用的方法讀取文件內容，從而展現到頁面上。

拖拽上傳文件 從桌面拖拽圖片到紅色區域

這里以上傳圖片為例，如果想要上傳 .txt 文件等。可以使用 FileReader.readAsText(fs[0], "utf-8")的方法讀取文件內容，從而展現到頁面上。






  
  拖拽上傳文件
  


  將文件拖拽到此區域

頁面截圖 (已經可以展示拖拽進來的圖片)

將文件保存到后臺

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

GPU云服務器云服務器從本地上傳文件到云服務器 flask服務器文件上傳云 php拖拽上傳大文件 H5圖片上傳到服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103804.html

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

摘要：拖拽上傳文件從桌面拖拽圖片到紅色區域這里以上傳圖片為例，如果想要上傳文件等。可以使用的方法讀取文件內容，從而展現到頁面上。拖拽上傳文件從桌面拖拽圖片到紅色區域這里以上傳圖片為例，如果想要上傳 .txt 文件等。可以使用 FileReader.readAsText(fs[0], utf-8)的方法讀取文件內容，從而展現到頁面上。拖拽上傳文件 li...

leiyi 2019-07-31 10:19 評論0 收藏0
使用Dropzone.js上傳

摘要：原創個人網站歡迎訪問說明后臺用的的框架，后臺對你理解這篇文章沒什么影響，你可以使用作為上傳區引入和然后使用表單定義一個即可完成第一種上傳第一種上傳效果作為上傳區作為上傳區也很簡單點我上傳下面兩行是和的方式實現綁定的例子原創【個人網站歡迎訪問】說明：后臺用的python的flask框架，后臺對你理解這篇文章沒什么影響，你可以使用php form作為上傳區引入Dropzone.js和d...

NervosNetwork 2019-06-28 13:35 評論0 收藏0
使用Dropzone.js上傳

摘要：原創個人網站歡迎訪問說明后臺用的的框架，后臺對你理解這篇文章沒什么影響，你可以使用作為上傳區引入和然后使用表單定義一個即可完成第一種上傳第一種上傳效果作為上傳區作為上傳區也很簡單點我上傳下面兩行是和的方式實現綁定的例子原創【個人網站歡迎訪問】說明：后臺用的python的flask框架，后臺對你理解這篇文章沒什么影響，你可以使用php form作為上傳區引入Dropzone.js和d...

gotham 2019-08-20 18:58 評論0 收藏0
使用Dropzone.js上傳

摘要：原創個人網站歡迎訪問說明后臺用的的框架，后臺對你理解這篇文章沒什么影響，你可以使用作為上傳區引入和然后使用表單定義一個即可完成第一種上傳第一種上傳效果作為上傳區作為上傳區也很簡單點我上傳下面兩行是和的方式實現綁定的例子原創【個人網站歡迎訪問】說明：后臺用的python的flask框架，后臺對你理解這篇文章沒什么影響，你可以使用php form作為上傳區引入Dropzone.js和d...

Mr_zhang 2019-07-30 14:34 評論0 收藏0