upload รูปภาพหลายๆรูป ด้วย Flask

แชร์ความรู้ภาษา Python ไพทอน การเขียนโปรแกรมภาษาไพทอน

Moderator: mindphp, ผู้ดูแลกระดาน

benzas00123
PHP Super Member
PHP Super Member
โพสต์: 244
ลงทะเบียนเมื่อ: 06/01/2020 9:58 am

upload รูปภาพหลายๆรูป ด้วย Flask

โพสต์ที่ยังไม่ได้อ่าน โดย benzas00123 »

วันนี้เราจะมาลองเขียน flask ให้ทำการอัพโหลดรูปภาพโดยใช้ python library หลักๆ ที่เราจะใช้คือ flask กับ os โดยขั้นแรกจะเริ่มจากสร้างไฟล์ html สำหรับหน้าอัพโหลดก่อน

index.html

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../static/css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="../static/js/bootstrap.js"></script>
</head>

<body>
<div class="rowcol-sm-3 col-sm-offset-4">
<form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <input type="file" name="file" accept="image/*" multiple>
  </div>
  <div>
    <input type="submit" class="btn btn-primary btn-lg" value="upload">
  </div>
</form>
</div>
</body>
</html>
หน้าตาตัวเว็บ
Python Knowledge-1.png
Python Knowledge-1.png (5.33 KiB) Viewed 934 times
ทำการ import library ที่เราจะใช้เข้ามา

โค้ด: เลือกทั้งหมด

import os
from flask import Flask
from flask import render_template
from flask import request
กำหนดตัวแปรสร้าง ที่อยู่ของโปรเจค

โค้ด: เลือกทั้งหมด

app_path = os.path.dirname(os.path.abspath(__file__))
Python Knowledge-1.png
Python Knowledge-1.png (6.1 KiB) Viewed 934 times
สร้าง index

โค้ด: เลือกทั้งหมด

@app.route ( '/' )
def index():
    return render_template ( 'index.html' )[/cod  ที่เราจะเขียนฟังก์ชั่นในการ
  
สร้างหน้าฟังก์ชั่น upload
[code]@app.route("/upload", methods=['POST' , 'GET'])
def upload():
    target = os.path.join ( app_path, "images/" )
    print ( target )

    if not os.path.isdir ( target ):
        os.mkdir ( target )

    for file in request.files.getlist ( "file" ):
        print ( file )
        filename = file.filename
        destination = "/".join ( [target, filename] )
        print ( destination )
        file.save ( destination )

    return "Upload Success"
กำหนดให้ ตัวแปร target เก็บ ที่อยู่ของ Folder images

โค้ด: เลือกทั้งหมด

target = os.path.join ( app_path, "images/" )

ถ้าภายในโปรเจคไม่มี folder images ให้ทำการสร้าง folder ใหม่

โค้ด: เลือกทั้งหมด

    if not os.path.isdir ( target ):
        os.mkdir ( target )
ทำการเก็บชื่อไฟล์ ไว้

โค้ด: เลือกทั้งหมด

    for file in request.files.getlist ( "file" ):
        print ( file )
        filename = file.filename
Python Knowledge-1.png
Python Knowledge-1.png (6.46 KiB) Viewed 934 times
ทำการ save ไฟล์โดยใช้ตำแหน่งของ target กับ filename โดยเชื่อมกันด้วย /

โค้ด: เลือกทั้งหมด

        destination = "/".join ( [target, filename] )
        print ( destination )
        file.save ( destination )
Python Knowledge-2.png
Python Knowledge-2.png (7.85 KiB) Viewed 934 times
ผลลัพธ์
Python Knowledge-1.png
Python Knowledge-1.png (1.35 KiB) Viewed 934 times
Python Knowledge-1.png
Python Knowledge-1.png (32.86 KiB) Viewed 934 times
Python Knowledge-1.png
Python Knowledge-1.png (3.18 KiB) Viewed 934 times


อ้างอิง
https://docs.python.org/3/library/os.html
https://getbootstrap.com/docs/3.3/css/
https://www.palletsprojects.com/p/flask/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 94