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

leiyi 发布于2019-07-31 10:19 / 2923人阅读

摘要：拖拽上传文件从桌面拖拽图片到红色区域这里以上传图片为例，如果想要上传文件等。可以使用的方法读取文件内容，从而展现到页面上。

拖拽上传文件 从桌面拖拽图片到红色区域

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

海外云主机私有云从本地上传文件到云服务器 flask服务器文件上传云 php拖拽上传大文件 H5图片上传到服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/43635.html

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

摘要：拖拽上传文件从桌面拖拽图片到红色区域这里以上传图片为例，如果想要上传文件等。可以使用的方法读取文件内容，从而展现到页面上。拖拽上传文件从桌面拖拽图片到红色区域这里以上传图片为例，如果想要上传 .txt 文件等。可以使用 FileReader.readAsText(fs[0], utf-8)的方法读取文件内容，从而展现到页面上。拖拽上传文件 li...

whinc 2019-08-23 17:06 评论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