〇、知识点

jquery ajax 文档告诉你可以使用默认的　application/x-www-form-urlencoded, multipart/form-data, or text/plain 这三种，其它的也可以，但是需要告诉ajax 的怎样序列化它。——这句话来源于：https://www.cnblogs.com/htoooth/p/7242217.html

一、原生ajax、不使用表单(Form)

app.py

import os

from flask import Flask, request, jsonify, render_template

from werkzeug import secure_filename

UPLOAD_FOLDER = 'uploads'

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):

    return '.' in filename and \

           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/uploadfile', methods=['POST'])

def upload_file():

    if request.method == 'POST':

        print('request.files', dir(request.files))

        file = request.files['file']

        if file and allowed_file(file.filename):

            filename = secure_filename(file.filename)

            url = os.path.join(app.config['UPLOAD_FOLDER'], filename)

            file.save(url)

            return jsonify(dict(url=url,)), 201

if __name__ == "__main__":

    app.run(debug=True)

index.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Flask上传图片演示三</title>

</head>

<body>

    <h1>Flask上传本地图片示例三</h1>

    <p>不使用表单Form，原生javascript实现ajax，返回上传的图片所保存的位置</p>

    <input type="file" name="file" />

    <br>

    <input type="button" value="上传" />

    <p id="res"></p>

    <script>

    var file = document.querySelector('input[type="file"]');

    var btn = document.querySelector('input[type="button"]');

    //ajax

    btn.addEventListener('click', function(event){

        event.preventDefault();

        var data = new FormData();

        data.append(file.name, file.files[0]);var xhr = new XMLHttpRequest();

        xhr.open('POST', '/uploadfile', true);

        //xhr.setRequestHeader("Content-Type", "multipart\/form-data;"); //千万不能要这一句，否则后台request.files读不到file

        xhr.send(data);

        xhr.addEventListener('loadend', function(){

            if(xhr.status == 201){

                var res_json = JSON.parse(xhr.responseText);

                document.querySelector('#res').innerHTML = "上传的图片保存在：" + res_json.url;

            }

        }, false);

    }, false);

    </script>

</body>

</html>

二、原生ajax、使用表单(Form)

app.py

import os

from flask import Flask, request, jsonify, render_template

from werkzeug import secure_filename

UPLOAD_FOLDER = 'uploads'

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):

    return '.' in filename and \

           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/uploadfile', methods=['POST'])

def upload_file():

    if request.method == 'POST':

        file = request.files['file']

        if file and allowed_file(file.filename):

            filename = secure_filename(file.filename)

            url = os.path.join(app.config['UPLOAD_FOLDER'], filename)

            file.save(url)

            return jsonify(dict(url=url,)), 201

if __name__ == "__main__":

    app.run(debug=True)

index.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Flask上传图片演示二</title>

</head>

<body>

    <h1>Flask上传本地图片示例二</h1>

    <p>使用表单Form，原生javascript实现ajax，返回上传的图片所保存的位置</p>

    <!-- <form enctype='multipart/form-data'> 注意：非必须指定enctype='multipart/form-data' -->

    <form>

        <input type="file" name="file"/>

        <br>

        <input type="submit" value="上传"/>

    </form>

    <p id="res"></p>

    <script>

    var form = document.querySelector('form');

    //ajax

    form.addEventListener('submit', function(event){

        event.preventDefault();

        var xhr = new XMLHttpRequest();

        xhr.open('POST', '/uploadfile', true);

        xhr.send(new FormData(form)); //注意：不需要设置Content-Type

        xhr.addEventListener('loadend', function() {

            if(xhr.status == 201){

                var res_json = JSON.parse(xhr.responseText);

                document.querySelector('#res').innerHTML = "上传的图片保存在：" + res_json.url;

            }

        }, false);

    }, false);

    </script>

</body>

</html>

三、无ajax、只使用表单(Form)

app.py

import os

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

from werkzeug import secure_filename

UPLOAD_FOLDER = 'uploads'

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):

    return '.' in filename and \

           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/uploadfile', methods=['POST'])

def upload_file():

    if request.method == 'POST':

        file = request.files['file']

        if file and allowed_file(file.filename):

            filename = secure_filename(file.filename)

            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

            return redirect(url_for('uploaded_file', filename=filename))

from flask import send_from_directory

@app.route('/uploads/<filename>')

def uploaded_file(filename):

    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == "__main__":

    app.run(debug=True)

index.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Flask上传图片演示一</title>

</head>

<body>

    <h1>Flask上传本地图片示例一</h1>

    <p>使用表单Form，无javascript，跳转显示上传的图片</p>

    <form action="/uploadfile" enctype='multipart/form-data' method='POST'> <!-- 注意：三个全指定action, enctype, method -->

        <input type="file" name="file" style="margin-top:20px;"/>

        <br>

        <input type="submit" value="上传" style="margin-top:15px;"/>

    </form>

</body>

</html>

四、预览、无Form、原生ajax

index.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Flask上传图片演示四</title>

</head>

<body>

    <h1>Flask上传本地图片示例四</h1>

    <p>上传前预览图片，不使用表单Form，原生ajax，返回上传的图片所保存的位置</p>

    <img id="base64image" src="" style="max-height:150px;"/>

    <br />

    <input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>

    <br />

    <input type="button" value="上传"/>

    <p id="res"></p>

    <script>

    var base64image = document.querySelector('#base64image');

    var fileElement = document.querySelector('input[type="file"]');

    var btnElement = document.querySelector('input[type="button"]');

    //预览

    fileElement.addEventListener('change', function(event){

        if (!event.target.files || !event.target.files[0]) {

            return;

        }

        var reader = new FileReader();

        reader.readAsDataURL(event.target.files[0]);

        reader.addEventListener("load", function(e){

            base64image.src = e.target.result; //base64编码

        }, false);

    },false);

    //ajax

    btnElement.addEventListener('click', function(event){

        event.preventDefault();

        var data = new FormData();

        data.append(fileElement.name, fileElement.files[0]);  //添加图片信息

        var xhr = new XMLHttpRequest();

        xhr.open("post", "/uploadfile", true);//true即异步

        //xhr.setRequestHeader('Content-Type', 'multipart/form-data'); //千万别写这句！！

        xhr.send(data);

        xhr.addEventListener("loadend", function(event){

            if(xhr.status == 201){ // 201，去看app.py！！

                var res = JSON.parse(xhr.responseText);  //接收的是json数据

                console.log(res);

            }

        }, false);

    },false);

    </script>

</body>

</html>

flask使用原生ajax、不使用表单(Form)上传文件的更多相关文章

  1. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  2. c# 模拟表单提交，post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  3. c# 模拟表单提交，post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...

  4. Java模拟表单POST上传文件

    JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...

  5. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  6. web 表单方式上传文件方法（不用flash插件）

    原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作 由于我测试用的做了一个上传文件和上传图片方法,所以我有 ...

  7. 通过form上传文件（php）

    前段代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  8. 关于form 上传文件时的小问题

    平时的form一般写成这样: <form action=" " method="" id="" name=""&g ...

  9. 关于vue使用form上传文件

    在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...

随机推荐

  1. 【效率工具】SSH一键登录脚本（可一键从跳板机登录线上服务器）

    说明 前阵子上线,一次性上了十个服务,一直上到凌晨才完事,期间每个服务都要先输入跳板机的登录信息来登录跳板机,然后再输入线上服务器的信息来登录线上服务器,实在是太过于麻烦,而且有些服务还有好几台服务器 ...

  2. Bayboy功能详解

    Bayboy功能详解 一.Badboy中的检查点 1.1以sogou.com搜索为例,搜索测试 步骤:打开Badboy工具,在地址栏中输入搜狗网址:输入 测试 进行搜索:点击红色按钮停止录制 1.2添 ...

  3. 第二章 基础查询 2-1 SQL语句基础

    一.列的查询 基本的SELECT语句: SELECT <列名 >,...... FROM < 表名>; 注:子句是SQL的组成要素. 注:查询结果中的列的顺序和SELECT子句 ...

  4. c/c++ 字节对齐

    c 字节对齐 概念: 结构体里会包括各种类型的成员,比如int char long等等,它们要占用的空间不同,系统为一个结构体开辟内存空间时,会有2种选择. 第一种:节省空间的方案,以上面的列子来说的 ...

  5. ping百度域名时的收获

    ping百度 你会发现ping www.baidu.com的时候,会转为ping www.a.shifen.com.但是ping baidu.com的时候却是普通的ip地址,而且ip地址还会变化.那么 ...

  6. gcc5.4报错对‘std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> >::~basic_string()’未定义的引用

    我在编译ligra是遇到了这个问题,网上搜了一遍,发现是了原因https://gcc.gnu.org/onlinedocs/libstdc%2B%2B/manual/using_dual_abi.ht ...

  7. Linux 小知识翻译 - 「BitTorrent」

    这次聊聊「BitTorrent」. (也就是下片子的 BT) BitTorrent是文件传输的一种.它可以在服务端负担很小的情况下高速的传输文件. BitTorrent最大的特点就是服务端可以将文件的 ...

  8. February 25th, 2018 Week 9th Sunday

    LIfe is about making an impact, not making an income. 生命在于影响他人,而非赚钱糊口. From Kevin Kruse. You probabl ...

  9. 023合并K个链表并排序

    #include "000库函数.h" struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), n ...

  10. Python3新特性 类型注解 以及 点点点

    Python3新特性 类型注解 以及 点点点 ... Python3 的新特性 Python 是一种动态语言,变量以及函数的参数是 不区分类型 的 在 函数中使用类型注解 相当于 给 形参的 类型 设 ...