Outils pour utilisateurs
python:flask:upload
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
python:flask:upload [2021/09/02 05:40] marclebrun [Vue] |
python:flask:upload [2021/10/08 07:39] (Version actuelle) marclebrun [Javascript] |
||
|---|---|---|---|
| Ligne 3: | Ligne 3: | ||
| Tutoriel: [[https://pythonise.com/series/learning-flask/flask-uploading-files]] | Tutoriel: [[https://pythonise.com/series/learning-flask/flask-uploading-files]] | ||
| - | ===== Template formulaire ===== | + | ===== 1. Upload traditionnel ===== |
| + | |||
| + | ==== Template formulaire ==== | ||
| <code html upload.html> | <code html upload.html> | ||
| Ligne 15: | Ligne 17: | ||
| </code> | </code> | ||
| - | ===== Vue ===== | + | ==== Vue ==== |
| <code python app.py> | <code python app.py> | ||
| Ligne 34: | Ligne 36: | ||
| </code> | </code> | ||
| - | ===== Utilisation du fichier ===== | + | ==== Utilisation du fichier ==== |
| Pour utiliser le fichier uploadé il faut l'enregistrer quelque part. | Pour utiliser le fichier uploadé il faut l'enregistrer quelque part. | ||
| Ligne 62: | Ligne 64: | ||
| ^ secure_filename | "nettoyage" du nom du fichier | | ^ secure_filename | "nettoyage" du nom du fichier | | ||
| - | ===== Sécurité ===== | + | ==== Sécurité ==== |
| Vérifier qu'il y a bien eu un fichier sélectionné : | Vérifier qu'il y a bien eu un fichier sélectionné : | ||
| Ligne 68: | Ligne 70: | ||
| <code python> | <code python> | ||
| fichier = request.files["fichier"] | fichier = request.files["fichier"] | ||
| - | if fichier.filename != "": | + | if fichier.filename: |
| ... | ... | ||
| else: | else: | ||
| Ligne 84: | Ligne 86: | ||
| flash(u"Ce type de fichier n'est pas autorisé !", "danger") | flash(u"Ce type de fichier n'est pas autorisé !", "danger") | ||
| return redirect(request.url) | return redirect(request.url) | ||
| + | </code> | ||
| + | |||
| + | ===== 2. Upload via Ajax ===== | ||
| + | |||
| + | ==== Formulaire ==== | ||
| + | |||
| + | <code html upload.html> | ||
| + | <h1>Ajax File Upload</h1> | ||
| + | |||
| + | <form id="frmUpload" method="POST" enctype="multipart/form-data"> | ||
| + | <label for="edtFile">Sélectionnez un fichier à uploader</label><br/> | ||
| + | <input type="file" name="edtFile" id="edtFile"><br/> | ||
| + | <button id="btnUpload">Envoyer</button> | ||
| + | </form> | ||
| + | </code> | ||
| + | |||
| + | ==== Javascript ==== | ||
| + | |||
| + | <code javascript upload.js> | ||
| + | let frmUpload = document.getElementById('frmUpload'); | ||
| + | let btnUpload = document.getElementById('btnUpload'); | ||
| + | |||
| + | btnUpload.addEventListener('click', event => { btnUploadClick(event) }); | ||
| + | |||
| + | function btnUploadClick(event) { | ||
| + | |||
| + | event.preventDefault(); | ||
| + | | ||
| + | fetch('/upload', { | ||
| + | method: 'POST', | ||
| + | body : new FormData(frmUpload) | ||
| + | }).then( | ||
| + | //... | ||
| + | ) | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ==== Vue ==== | ||
| + | |||
| + | <code python app.py> | ||
| + | @app.route("/upload", methods=["POST"]) | ||
| + | def upload(): | ||
| + | result = {} | ||
| + | | ||
| + | if 'edtFile' in request.files: | ||
| + | if request.files['edtFile'].filename: | ||
| + | | ||
| + | fichier = request.files['edtFile'] | ||
| + | fichier.save('/home/marc/...') | ||
| + | | ||
| + | # ... | ||
| + | | ||
| + | else: | ||
| + | | ||
| + | result['error'] = "Erreur, il n'y a pas de fichier." | ||
| + | | ||
| + | return jsonify(result) | ||
| </code> | </code> | ||
python/flask/upload.1630561238.txt.gz · Dernière modification: 2021/09/02 05:40 par marclebrun
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
