Flask dropzone โมดูลสำหรับการสร้าง Drop file อย่างง่าย

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

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

benzas00123
PHP Super Member
PHP Super Member
Posts: 244
Joined: 06/01/2020 9:58 am

Flask dropzone โมดูลสำหรับการสร้าง Drop file อย่างง่าย

Post by benzas00123 »

Flask dropzone เป็นโมดูลที่ถูกพัฒนามาสำหรับ Flask Web framework โดยจะเป็น module สำหรับการสร้างตัว อัพโหลดไฟล์ อย่างง่าย ถูกพัฒนามาจาก Dropzone.js แต่ใช้ได้ง่ายกว่าเพราะมีคำสั่งสำเร็จรูปอยู่แล้ว ในส่วนความยืดหยุ่นนั้น จะมีค่อนข้างน้อย หากอยากจะใช้ความสามารถของตัว dropzone ให้เต็มที่แนะนำว่าให้ ใช้ Dropzone.js โดยตรง จะมีฟังก์ชั่นที่หลากหลายกว่า เราจะสามารถดาวโหลดน์ ตัว module นี้ได้ผ่านคำสั่ง

Code: Select all

pip install Flask-Dropzone
วิธีการเขียน คร่าวๆ จะมีดังนี้

1.import module

Code: Select all

import os
from flask import Flask, render_template, request
from flask_dropzone import Dropzone
from PIL import Image
2.สร้างตัวแปรสำหรับเก็บตำแหน่งของตัว file

Code: Select all

basedir = os.path.abspath(os.path.dirname(__file__))

parth = "static/images/"

app = Flask(__name__)
3.ทำการตั้งค่า ตัว flask dropzone โดยการตั้งค่าที่จะยกตัวอย่างนั้นจะเป็นการตั้งค่าคร่าวๆเท่านั้น

Code: Select all

app.config.update(
    UPLOADED_PATH=os.path.join(basedir, 'uploads'),
    # Flask-Dropzone config:
    DROPZONE_ALLOWED_FILE_TYPE='image',
    DROPZONE_MAX_FILE_SIZE=3,
    DROPZONE_MAX_FILES=30,
    DROPZONE_DEFAULT_MESSAGE='อัพรูปและไฟล์',
)

dropzone = Dropzone(app)
4.สร้างตัว ฟังก์ชั่นขึ้นมาเพื่อที่จะทำการเซฟ file

Code: Select all

@app.route('/', methods=['GET', 'POST'])
def upload():

    if request.method == 'POST':
        f = request.files.get('file')
        f.save(os.path.join(parth, f.filename))

    for i in os.listdir ( parth ):
        im = Image.open(parth+i)
        s = im.size

    return render_template('index.html')
fullcode

Code: Select all

# -*- coding: utf-8 -*-

import os
from flask import Flask, render_template, request
from flask_dropzone import Dropzone
from PIL import Image



basedir = os.path.abspath(os.path.dirname(__file__))

parth = "static/images/"

app = Flask(__name__)

app.config.update(
    UPLOADED_PATH=os.path.join(basedir, 'uploads'),
    # Flask-Dropzone config:
    DROPZONE_ALLOWED_FILE_TYPE='image',
    DROPZONE_MAX_FILE_SIZE=3,
    DROPZONE_MAX_FILES=30,
    DROPZONE_DEFAULT_MESSAGE='อัพรูปและไฟล์',
)

dropzone = Dropzone(app)


@app.route('/', methods=['GET', 'POST'])
def upload():

    if request.method == 'POST':
        f = request.files.get('file')
        f.save(os.path.join(parth, f.filename))

    for i in os.listdir ( parth ):
        im = Image.open(parth+i)
        s = im.size

    return render_template('index.html')


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

html code

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flask-Dropzone Demo: Basic</title>
  {{ dropzone.load_css() }}
  {{ dropzone.style('border: 1px dashed #0087F7; margin: 1%; min-height: 10px;') }}


</head>
<body>
  {{ dropzone.create(action='upload') }}
  {{ dropzone.load_js() }}
  {{ dropzone.config() }}

</body>
</html>[/code



ผลลัพธ์

[attachment=3]Python Knowledge-1.png[/attachment]



อัพโหลดรูป

[attachment=2]Python Knowledge-2.png[/attachment]


[attachment=1]Python Knowledge-3.png[/attachment]



หากเอาเมาส์ไปชี้ที่รูปก็จะเห็นข้อมูลของภาพ ทั้ง ชื่อและขนาดของไฟล์


[attachment=0]Screenshot from 2020-01-31 17_05_34.png[/attachment]

เป็นอย่างไรบ้างครับกับการใช้ module flask dropzone จะเห็นได้ว่าทั้งใช้ง่ายและเราก็ไม่จำเป็นต้องมีความรู้เกี่ยวกับ ภาษา javascript เลย เพียงแค่เอาโค๊ดคำสั่งสำเร้็จรูปไปวางเท่านั้น แต่ก็ต้องแลกมาด้วย ข้อจำกัดมากมายและ ไม่ค่อยจะมีความยืดหยุ่น หวังว่าคงจะพอมีประโยชน์นะครับ


อ้างอิง
https://flask-dropzone.readthedocs.io/en/latest/
https://github.com/greyli/flask-dropzone
https://readthedocs.org/projects/flask-dropzone/downloads/pdf/latest/

ศึกษาเพิ่มเติม
[url=https://www.mindphp.com/vdo-tutorial-python.html]วีดีโอสอน python[/url]
[url=https://www.mindphp.com/developer/tips-python.html]บทความเทคนิคเกี่ยวกับ python[/url]
[url=https://www.mindphp.com/forums/viewforum.php?f=144]แชร์ความรู้ python[/url]
[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/83-python/2506-sequences-import-module.html]ตำแหน่ง และลำดับการโหลดโมดูล ด้วย import module ใน Python[/url]
Attachments
Python Knowledge-1.png
Python Knowledge-1.png (7 KiB) Viewed 376 times
Python Knowledge-2.png
Python Knowledge-2.png (67.54 KiB) Viewed 376 times
Python Knowledge-3.png
Python Knowledge-3.png (77.06 KiB) Viewed 376 times
Screenshot from 2020-01-31 17_05_34.png
Screenshot from 2020-01-31 17_05_34.png (79.45 KiB) Viewed 376 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “Python Knowledge”

Who is online

Users browsing this forum: No registered users and 12 guests