021-71053903 [email protected] پشتیبانی از شنبه تا چهارشنبه ساعت 9 الی 16

آموزش آپلود تصاویر و فایل ها در جنگو

مقدمه

با سلام خدمت تمامی شما مخاطبین خوب وبسایت پایتونی ها با یک مقاله آموزشی دیگه در خدمتتون هستیم با آموزش طراحی وبسایت با جنگو، امروز قصد داریم نحوه اضافه کردن اسنادو فایل های کاربر و فایل تصویری آپلود شده به پروژه جنگو خود را به عنوان یک فرم ساده HTML و Django ModelForm توضیح دهیم.

من از Bootstrap 5 برای استایل اولیه صفحات وب خود استفاده می کنم.

 

فایل های رسانه ای جنگو

ابتدا تنظیمات آپلود رسانه خود را قبل از ایجاد و آپلود فرم پیکربندی کنید.

URL رسانه را به تنظیمات جنگو اضافه کنید

mysite > mysite > settings.py

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

 

 

به فایل settings.py بروید و و را مشخص MEDIA_URL کنید MEDIA_ROOT. آنها به طور پیش فرض مشخص نشده اند.

بالش را نصب کنید

خط فرمان ویندوز

(env) C:\Users\Owner\Desktop\Code\env\mysite> pip install Pillow

 

 

همچنین Pillow را برای پشتیبانی از آپلود رسانه نصب کنید.

URL رسانه را به URL های جنگو اضافه کنید

mysite > mysite > urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings #add this
from django.conf.urls.static import static #add this

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include ('main.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

سپس به mysite > urls.py بروید و تابع helper را در بالا اضافه کنید.

به خاطر داشته باشید که فقط زمانی کار می کند که DEBUGروی تنظیم شده باشد Trueو URL مشخص شده در تنظیمات محلی باشد (یعنی /mediaنه https://media.site.com/).

اکنون، هنگامی که یک تصویر در حال توسعه آپلود می شود، به فهرست رسانه ای که در  mysite > media اضافه می شود .

 

 

بارگذاری فایل/تصویر جنگو: فرم ساده

حالا زمان ایجاد یک فرم ساده است که فایل ها را با استفاده از آن در سیستم فایل جنگو آپلود می کند.

این مثال درک فرآیند آپلود فایل را آسان تر می کند. با این حال، توصیه می کنم از Django ModelForm برای آپلود فایل های کاربر استفاده کنید تا به راحتی به داده ها منتقل کنید.

 

قالب HTML برای آپلود فایل های ساده

mysite > main > templates > main > (New File) upload.html

{% extends "main/header.html" %}

{% block content %}  
   
        <div class="container">

          <!--Simple Form-->
          <h2 class="my-4">Add a new movie script</h2>
          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
                <input type="file" name="upload" accept=".doc, .docx, .pdf, .txt">
                <br>
                <button class="btn btn-dark my-4" type="submit">Submit</button>
          </form>

          <!--See File Uploaded-->
          <h2 class="my-4">Movie Script</h2>
          <div class="row">
            {% if uploaded_file_url %}
            <div class="col-lg-4 col-md-6 col-sm-12 pb-4">
              <p>Uploaded to:<a href="{{ uploaded_file_url }}">{{ uploaded_file_url }}</a></p>
              <a class="btn btn-dark my-4" href="/">Return to Homepage</a>
            {% else %}
            <p>No movies scripts added.</p>
            {% endif %}
          </div>

        </div>
    

{% endblock %}

 

خوب حالا، به قالب HTML خود بروید و یک <form>  عنصر اضافه کنید. صفات method="post"و enctype="multipart/form-data".

POSTبرای ارسال داده ها به سرور استفاده می شود در حالی که enctypeمشخص می کند که چگونه داده های فرم باید هنگام ارسال به سرور رمزگذاری شوند.

هر دوی این ویژگی ها برای ارسال آپلود فایل مورد نیاز هستند.

برای این فرم ساده، که در آن فقط با استفاده از یک فیلد ورودی اصلی به عنوان آپلود فایل مشخص شده است.

مقدار acceptمشخصه را برای تعریف انواع فایل های پذیرفته شده اضافه کنید. ما هر pdf، فایل متنی یا سند Word را می پذیریم.

هنگامی که فایل آپلود می شود، URL با استفاده از پاس متن در نماها فراخوانی می شود.

 

قالب HTML برای آپلود تصاویر ساده

mysite > main > templates > main > upload.html

{% extends "main/header.html" %}

{% block content %}  
   
        <div class="container">

          <!--Simple Form-->
          <h2 class="my-4">Add a new movie poster</h2>
          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
                <input type="file" name="upload" accept="image/*">
                <br>
                <button class="btn btn-dark my-4" type="submit">Submit</button>
          </form>

          <!--See Image Uploaded-->
          <h2 class="my-4">Movie Poster</h2>
          <div class="row">
            {% if file_url %}
            <div class="col-lg-4 col-md-6 col-sm-12 pb-4">
              <img src="{{ file_url }}" class="img-fluid">
              <br>
              <a class="btn btn-dark my-4" href="/">Return to Homepage</a>
            {% else %}
            <p>No movies posters added.</p>
            {% endif %}
          </div>

        </div>
    

{% endblock %}

 

به قالب HTML خود بروید و یک  <form> عنصر با ویژگی ها  method="post" و  enctype="multipart/form-data".

قرار بود هر فایل تصویری را برای این فیلد ورودی بپذیریم.

هنگامی که فایل تصویر آپلود شد، تصویر را با استفاده از زمینه از نماها نمایش خواهیم داد.

 

urls.py را به روز کنید

mysite > main > urls.py

from django.urls import path
from . import views

app_name = "main"   


urlpatterns = [
    path("", views.homepage, name="homepage"),
    path("upload", views.upload, name="upload")
]

 

 

اگر قالب HTML جدیدی اضافه کرده اید  ، main > urls.py را به روز کنید.

views.py را به روز کنید

mysite > main > views.py

from django.shortcuts import  render
from django.core.files.storage import FileSystemStorage

def upload(request):
    if request.method == 'POST' and request.FILES['upload']:
        upload = request.FILES['upload']
        fss = FileSystemStorage()
        file = fss.save(upload.name, upload)
        file_url = fss.url(file)
        return render(request, 'main/upload.html', {'file_url': file_url})
    return render(request, 'main/upload.html')

 

 

شما باید FileSystemStorage  در جنگو را وارد کنید ، کلاسی که ذخیره سازی سیستم فایل Local یا محلی را پیاده سازی می کند.

آپلودهای فایل دریافت شده و به فرم موجود در request.FILES. با این حال، این تنها در صورتی کار می کند enctypeکه در فرم HTML مشخص شده باشد.

سپس فایل آپلود شده از طریق request.FILES['upload'] قابل دسترسی هستند، FileSystemStorage در آن ذخیره می شود و به عنوان uploaded_file_urlزمینه در قالب ما بازگردانده می شود.

مکان آپلود پیش فرض MEDIA_ROOTدر تنظیمات است مگر اینکه آن را تغییر دهید.

کلاس FileSystemStorgeاز کلاس Storage  جنگو به ارث می برد که شامل saveو urlمتدهای استفاده شده در بالا می باشد.

خوب حالا به تصاویر زیر دقت کنید:

بارگذاری فایل جنگو: Django ModelForm

حالا بیایید به ModelForms برویم. اگر به دنبال ذخیره اطلاعات آپلود شده توسط کاربران در یک شی مدل هستید، از Django ModelForm استفاده کنید.

 

یک فیلد Model را در فایل  زیر ایجاد کنید:

mysite > main > models.py

from django.db import models

# Create your models here.
class Movies(models.Model):
   file = models.FileField(upload_to='documents/', None=True)
   image = models.ImageField(upload_to='images/', None=True)

 

به models.py بروید و یک  FieldField()مسیر آپلود فایل رسانه ای مشخص  می کند، اضافه کنید.

این نیز نمونه ای از ImageField()آپلود به عنوان یک فیلد مدل است.

upload_to به طور خودکار در رسانه ROOT مشخص شده در تنظیمات آپلود می شود. لازم نیست رسانه را در upload_to   ذخیره کنید.

 مکان آپلود مهم نیست، اما باید نام مناسبی داشته باشد .

 

فیلدهای فرم جنگو را از فیلدهای مدل جنگو ایجاد کنید

mysite > main > forms.py

from django import forms
from .models import Movie 


# Create your forms here.
class MovieForm(forms.ModelForm):

    class Meta:
        model = Movie
        fields = ('file', 'image')

 

اکنون به فایل forms.py برویدMovie ، مدل را وارد کنید و با اضافه کردن فیلد مدل به عنوان فیلد فرم، ری اکشن Form را لغو کنید.

 

ModelForm را به قالب HTML اضافه کنید

{% extends "main/header.html" %}

{% block content %}  

{% load crispy_forms_tags %}  
   
        <div class="container">

          <!--Django Form-->
          <h2 class="my-4">Add a new movie</h2>
          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
              {{form|crispy}}
                <button class="btn btn-dark my-4" type="submit">Submit</button>
          </form>

        <!--Django Model-->
        <h2 class="my-4">Movies</h2>
        <div class="row">
          {% for m in movies %}
          <div class="col-lg-4 col-md-6 col-sm-12 pb-4">
            <div class="card h-100 p-4">
              <img src="{{ m.image.url }}" class="card-img-top">
              <a href="/media/{{m.file}}">View Script</a>
            </div>
          </div>
          {% empty %}
          <p>No movies added.</p>
          {% endfor %}
        </div>

      </div>
    

{% endblock %}

 

اکنون می توانید این تگ را اضافه کنید  {{form}} که حاوی تمام فیلدها و ویژگی های فرم است که در  forms.py تنظیم شده است.

این معادل ورودی هایی است که قبلاً در فرم Simple اضافه شده است.

ابزارهای توسعه دهنده خود را باز کنید تا ببینید:

 

crispy اگر می‌خواهید به فرم جنگو خود استایل بدهید  ، django-crispy-forms را پیکربندی  کنید و فیلتر را به فرم اضافه  کنید.

همچنین می توانید یک حلقه for اضافه کنید که تمام اشیاء مدل موجود ذخیره شده در مدل Movie را تکرار می کند تا بتوانید فایل در حال آپلود در الگو خاصی را فراخوانی کنید.

 

یک تابع view ایجاد کنید

mysite > main > views.py

from django.shortcuts import render, redirect
from .forms import MovieForm
from .models import Movie


# Create your views here.
def homepage(request):
    return render(request, 'main/home.html')

def upload(request):
    if request.method == "POST":
        form = MovieForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
        return redirect("main:upload")
    form = MovieForm()
    movies = Movie.objects.all()
    return render(request=request, template_name="main/upload.html", context={'form':form, 'movies':movies})

 

اکنون به سراغ نماها می رویم که همانطور که می بینید اکنون با استفاده از Django ModelForm ساده شده اند.

تنها کاری که باید انجام دهیم این است که وارد request.POSTو request.FILESداخل فرم شده و فرم را ذخیره کنیم.

کار با ModelForm به این معنی است که این فرم ذخیره شده به طور خودکار به عنوان یک شی Model در مدل Movie ذخیره می شود.

برای ایجاد اشیاء مدل، کد اضافی لازم نیست.

سپس می توانید با ارسال اشیاء مدل به الگو، آپلودها را به عنوان متن فراخوانی کنید.

اگر به دنبال کسب اطلاعات بیشتر در مورد Django ModelForms هستید، این راهنما را بررسی کنید.

 

محمدرضا حسنی

224 مطلب منتشر شده

دانش آموخته رشته فناوری اطلاعات / موسس پایتونی ها

درباره این مطلب نظر دهید !

مطالب پرمخاطب پایتونی ها

tag html

Tag (HTML قسمت دوم)

2
دقیـقه مطالعه
ادامه ...
آموزش Markdown

آموزش Markdown

17
دقیـقه مطالعه
ادامه ...

محصولات فروش پایتونی ها

%60
تخفیف

آموزش فیگما (Figma)

30,000 تومان
2