ajaxとjQueryプラグインを使用してdjangoモデルに複数のファイルをアップロードする
python manage.py runserverrepoのルートフォルダーからdjangoサーバーを実行します
写真のアップロードボタンを押して、アップロードする必要のある画像をいくつでも選択し、開くボタンを押します
アップロードされた画像は、適切なリンクとともに下の表に一覧表示されます。リンクをクリックすると、画像が表示されます。
画像はメディアにアップロードされます/ {現在の年} / {現在の月} / {現在の日付} /
既存のDjangoプロジェクトで、追加してメディアファイルの設定を構成します
settings.py
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
次に、プロジェクトのルートディレクトリにmediaという名前のフォルダを作成します。
また、開発環境でアップロードをテストするには、これをルートurlconfの下部に追加します。
urls.py
from django.contrib import admin from django.urls import path, include from django.conf.urls.static import static from django.conf import settings ... urlpatterns = [ ... ] if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
現在、残りは静的アセットであり、ほとんどがJavaScriptアセットです。使用するものは次のとおりです。
githubリポジトリからファイルをダウンロードすることでjqueryとbootstrapの静的フォルダーからファイルを提供できるインターネットcdnを使用します。
ベースファイルのjqueryとbootstrapにcdnを使用し、jqueryファイルアップロードプラグインコードにdjangoテンプレートブロックを追加します。
次に、を実行してdjangoアプリを作成し、ファイルをアップロードするためのモデルを作成しましょう。
python manage.py startapp photos
次に、タイトル付きの画像をアップロードし、写真オブジェクトが作成および編集された日時を保存するための単純なモデルを作成します。
photos / models.py
from django.db import models from .utils import photo_directory_path class Photo(models.Model): title = models.CharField(max_length=256) file = models.ImageField(upload_to=photo_directory_path) timestamp = models.DateTimeField(auto_now=True) updated = models.DateTimeField(auto_now_add=True)
注:
ImageFieldモデルではを使用しているため、ピローモジュールも取り付ける必要があります。
また
photo_directory_path、写真をMEDIA_ROOT / photos / 2018/01/2にアップロードするようなutils関数を保存するために別のファイルを使用しています。もちろん、日付はコンピューターの現在の日付によって異なります。
写真/utils.py
def photo_directory_path(instance, filename): """file will be saved to MEDIA_ROOT/photos/2018/01/2""" return 'photos/%Y/%m/%d/'
ファイルをアップロードするためのフォームも非常にシンプルです、
photos / forms.py
from django import forms from .models import Photo class PhotoForm(forms.ModelForm): class Meta: model = Photo fields = '__all__'
ファイルをアップロードするにはURLルートが必要なので、photosフォルダー内にurls.pyという名前の新しいファイルを作成します
photos / urls.py
from django.urls import path from .views import BasicFileUploadView app_name = 'photos' urlpatterns = [ path('basic-upload/', BasicFileUploadView.as_view(), name='basic-upload') ]
今ビュー、
photos / views.py
from django.shortcuts import render from django.views import View from django.http import JsonResponse from .models import Photo from .forms import PhotoForm class BasicFileUploadView(View): def get(self, request): photos = Photo.objects.all() context = {'photos': photos} return render(request, 'photos/basic_upload.html', context) def post(self, request): form = PhotoForm(self.request.POST, self.request.FILES) if form.is_valid(): photo = form.save() data = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url} else: data = {'is_valid': False} return JsonResponse(data)
django.views.View私たちはGETとPOSTメソッドとそれらの機能を定義することが可能なクラスベースのビューを作成することができます。
では
GET、私たちのURLへのリクエストたちの単純なパスコンテキスト内のすべての写真やレンダリング 写真/ basic_upload.htmlのファイルを。あなたはtemplates / photos /basic_upload.htmlでそのコードを見ることができます
また、フロントエンドjavascriptはstatic / jquery / js / basic_upload.jsファイルにあり、Windowsエクスプローラーを開いてファイルのアップロードプロセスを開始します。
サーバーを実行し、[写真のアップロード]ボタンをクリックして、アップロードする画像をいくつでも選択し、[開く]を押すと、ファイルデータが Tableに表示されます。
ファイルのアップロードをドラッグアンドドロップするためのコードと、ファイルのアップロードの進行状況を示す進行状況バーもあります。
疑問や質問がある場合は、リポジトリで問題を開始してください。すぐに連絡します。