〇、知识点

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. Android 如何解决dialog弹出时无法捕捉Activity的back事件

    Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到b ...

  2. matlab练习程序（地图上画经纬度）

    需要看下生成的数据在地球上的经纬度具体位置. 投影为墨卡托投影.   clear all; close all; clc; load coast; a=load('out.txt'); %自己的经纬度 ...

  3. Charles 抓包手机app

    最近在测为移动端提供的API, 使用mac系统, 发现fiddler在mac下无法使用, 不知道其他朋友是否遇见过, 只能找替代工具. 先去百度上搜索下载Charles 破解版, 选择Charles是 ...

  4. Jupyter Notebook默认工作路径的修改

    相信每一个学习Python的童鞋,都尝试过Jupyter Notebook,所以我也就不多介绍,真的还不错哎这软件. 不过美中不足的,就是它的默认工作路径,每次打开都是系统盘的Administrato ...

  5. Linux 无线网卡配置

    无线网卡常见的配置选项 某TL-WR842N路由器无线配置选项含义: 无线名称 路由器的无线(Wi-Fi)名称.无线密码 无线加密使用WPA2-PSK/WPA-PSK加密方式.AES加密算法,无线密码 ...

  6. sql 语句-初级进阶（一）

    以下所有的sql语句是根据个人资料进行操作,为方便大家操作联系,附上链接:: 链接:https://pan.baidu.com/s/14LmWyhJPQRzpjURQBKM4mA 提取码:wu1q  ...

  7. c/c++ 智能指针 weak_ptr 使用

    智能指针 weak_ptr 使用 weak_ptr用途: 1,解决空悬指针问题 2,解决循环引用问题 weak_ptr特点:没有*操作和->操作 weak_ptr是不控制所指对象生存周期的智能指 ...

  8. 记录参加QCon2017北京站的心得

    如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...

  9. 设计模式のFlyweight（享元模式）----结构模式

    一.产生背景 享元模式:它使用共享物件,用来尽可能减少内存使用量以及分享资讯给尽可能多的相似物件:它适合用于只是因重复而导致使用无法令人接受的大量内存的大量物件.通常物件中的部分状态是可以分享.常见做 ...

  10. nginx学习笔记（一）

    select模型主要是apache用   FD 文件描述符   soa架构 安装nginx ping baidu.com netstat -lntup 查看端口 cat /etc/redhat-rel ...