Téléchargement de fichiers avec Flask + jQuery

Je n'ai pas étudié correctement Python lui-même, donc le code est peut-être celui-là.

environnement

code

Si vous exécutez run.py avec le code suivant et téléchargez le fichier, le fichier téléchargé sera placé dans la même hiérarchie que run.py.

run.py


from flask import Flask, request
app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    the_file = request.files['the_file']
    the_file.save("./" + the_file.filename)
    print request.form['other_data']    # 999
    return ""

if __name__ == '__main__':
    app.run()

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask Upload Test</title>
</head>
<body>
<button>Upload File</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    (function () {
        'use strict';

        var onClickButton = function () {
            var html =
                    '<form id="uploadForm" class="upload-form" style="display: none;">' +
                    '<input id="theFile" name="the_file" type="file">' +
                    '</form>';
            $('body').append(html);
            $('#theFile').on('change', uploadFile).click();
        };

        var uploadFile = function () {
            var formData = new FormData($('#uploadForm')[0]);
            formData.append('other_data', 999);
            $.ajax({
                url: '/upload',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                timeout: 10000
            }).done(function () {
                console.log('done');
            }).fail(function () {
                console.log('fail');
            }).then(function () {
                $('#uploadForm').remove();
            });

        };

        $('button').on('click', onClickButton);
    })();
</script>
</body>
</html>

Recommended Posts

Téléchargement de fichiers avec Flask + jQuery
Téléchargement de fichiers avec django
Fonction de téléchargement d'image avec Vue.js + Flask
Télécharger des fichiers avec Django
Opération de fichier avec open - "../"
Restriction IP avec Flask
Bonjour le monde sur flacon
Programmation avec Python Flask
Comment télécharger avec Heroku, Flask, Python, Git (Partie 1)
Comment télécharger avec Heroku, Flask, Python, Git (Partie 2)
Déployez Flask avec ZEIT maintenant
Touch Flask + courir avec Heroku
Bonjour le monde avec Flask + Hamlish
Test unitaire du flacon avec pytest
API avec Flask + uWSGI + Nginx
Développement d'applications Web avec Flask
Télécharger un fichier sur Dropbox
Transfert de fichiers rapide avec tissu
Téléchargement d'images et personnalisation avec django-ckeditor
Transfert de fichiers bidirectionnel dans Pythonista 3
Voir la couverture du flacon avec pytest-cov
Application Web avec Python + Flask ② ③
Télécharger le fichier csv avec python
Créer un fichier xlsx avec XlsxWriter
Télécharger plusieurs fichiers avec Flask
Application Web avec Python + Flask ④
Télécharger le fichier sur Cloud Storage (GCS) de GCP ~ Charger avec Python local
[Connexion LINE] Vérifier l'état avec Flask
Téléchargeons des fichiers S3 avec CLI
Extraire le fichier xz avec python
Obtenez des informations sur les fichiers vidéo avec ffmpeg-python
Bases de SNS Python faites avec Flask
[Python] Ecrire dans un fichier csv avec Python
[Automatisé avec python! ] Partie 1: fichier de configuration
Téléchargement de fichiers implémenté avec Python + Bottle
[Mémo] Liens lors du développement avec Flask
Suivez la hiérarchie des fichiers avec fts
Sortie vers un fichier csv avec Python
Exécutez l'application avec Flask + Heroku
Persistez le serveur d'API Flask avec Forever
Servir des fichiers statiques avec X-Send File
Authentification de base, authentification Digest avec Flask
Créer un environnement Flask avec Dockerfile + docker-compose.yml
Téléchargez le fichier déployé avec appcfg.py
Utiliser le fichier d'étalonnage de la caméra avec OpenCvSharp4
[Automatisé avec python! ] Partie 2: Fonctionnement des fichiers
Ouvrir le fichier avec l'application par défaut
Création d'un babillard avec flask
Meilleures pratiques pour les fichiers de configuration dans Flask
Développement d'applications avec Docker + Python + Flask
Télécharger et télécharger des images avec Falcon
Téléchargement de fichiers vers Azure Storage (Python)
Créer un téléchargeur de fichiers avec Django