Django-Multiple-File-Uploads-AJAX - ajaxを使用してdjangoモデルに複数のファイルをアップロードする

(Uploading multiple files to django model using ajax)

Created at: 2019-01-02 10:56:55

Language: HTML

URL: https://github.com/Alexmhack/Django-Multiple-File-Uploads-AJAX

Django-複数-ファイル-アップロード-AJAX

ajaxとjQueryプラグインを使用してdjangoモデルに複数のファイルをアップロードする

使用法

```
python manage.py runserver
```
repoのルートフォルダーからdjangoサーバーを実行します
http://127.0.0.1:8000/photos/basic-upload/を開きます
写真のアップロードボタンを押して、アップロードする必要のある画像をいくつでも選択し、開くボタンを押します
アップロードされた画像は、適切なリンクとともに下の表に一覧表示されます。リンクをクリックすると、画像が表示されます。
画像はメディアにアップロードされます/ {現在の年} / {現在の月} / {現在の日付} /

インストール

既存の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)

jQueryの使用法

現在、残りは静的アセットであり、ほとんどがJavaScriptアセットです。使用するものは次のとおりです。

ブートストラップ3.3.7
jQuery3.1.1-プラグインの基本依存関係。
jQueryファイルのアップロード9.14.1

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に表示されます。

ファイルのアップロードをドラッグアンドドロップするためのコードと、ファイルのアップロードの進行状況を示す進行状況バーもあります。

疑問や質問がある場合は、リポジトリで問題を開始してください。すぐに連絡します。