[PYTHON] Datei-Upload mit Flask + jQuery

Ich habe Python selbst nicht richtig studiert, also könnte der Code das sein.

Umgebung

Code

Wenn Sie "run.py" mit dem folgenden Code ausführen und die Datei hochladen, wird die hochgeladene Datei in dieselbe Hierarchie wie "run.py" gestellt.

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

Datei-Upload mit Flask + jQuery
Datei-Upload mit Django
Bild-Upload-Funktion mit Vue.js + Flask
Laden Sie Dateien mit Django hoch
Dateivorgang mit open - "../"
IP-Einschränkung mit Flask
Hallo Welt auf Flasche
Programmieren mit Python Flask
Hochladen mit Heroku, Flask, Python, Git (Teil 1)
Hochladen mit Heroku, Flask, Python, Git (Teil 2)
Stellen Sie Flask jetzt mit ZEIT bereit
Berühre Flask + laufe mit Heroku
Hallo Welt mit Flask + Hamlish
Testen Sie den Kolben mit einem Pytest
API mit Flask + uWSGI + Nginx
Entwicklung von Webanwendungen mit Flask
Laden Sie eine Datei in Dropbox hoch
Schnelle Dateiübertragung mit Stoff
Hochladen und Anpassen von Bildern mit django-ckeditor
Bidirektionale Dateiübertragung in Pythonista 3
Anzeigen der Kolbenabdeckung mit pytest-cov
Webanwendung mit Python + Flask ② ③
Laden Sie die CSV-Datei mit Python herunter
Erstellen Sie eine Xlsx-Datei mit XlsxWriter
Hochladen mehrerer Dateien mit Flask
Webanwendung mit Python + Flask ④
Laden Sie Dateien in den Cloud Storage (GCS) von GCP hoch. ~ Laden Sie mit lokalem Python
[LINE-Anmeldung] Überprüfen Sie den Status mit Flask
Laden wir S3-Dateien mit CLI hoch
Extrahieren Sie die xz-Datei mit Python
Holen Sie sich Informationen zu Videodateien mit ffmpeg-python
Mit Flask erstellte SNS Python-Grundlagen
[Python] Mit Python in eine CSV-Datei schreiben
[Mit Python automatisiert! ] Teil 1: Datei einstellen
Implementierter Dateidownload mit Python + Bottle
[Memo] Links bei der Entwicklung mit Flask
Folgen Sie der Dateihierarchie mit fts
Ausgabe in eine CSV-Datei mit Python
Führen Sie die App mit Flask + Heroku aus
Behalten Sie den Flask API-Server für immer bei
Servieren Sie statische Dateien mit X-Send File
Basisauthentifizierung, Digest-Authentifizierung mit Flask
Erstellen Sie eine Flask-Umgebung mit Dockerfile + docker-compose.yml
Laden Sie die mit appcfg.py bereitgestellte Datei herunter
Verwenden Sie die Kamerakalibrierungsdatei mit OpenCvSharp4
[Mit Python automatisiert! ] Teil 2: Dateivorgang
Datei mit Standard-App öffnen
Post Bulletin Board Erstellung mit Flasche
Best Practices für Konfigurationsdateien in Flask
Anwendungsentwicklung mit Docker + Python + Flask
Laden Sie Bilder mit Falcon hoch und laden Sie sie herunter
Datei-Upload in Azure Storage (Python)
Erstellen Sie mit Django einen Datei-Uploader