質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

742閲覧

DjangoでAjaxによる画像のアップロードができなくて困っています。助けて下さい。

temps1101

総合スコア134

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/23 03:34

編集2022/01/12 10:55

こんにちは、

djangoでウェブアプリを作成しています。
そのアプリの中で画像をアップロードするようにする必要があるのですが、画像をアップロードするとリダイレクトされてしまうのが嫌なのでAjaxを使ってアップロードすることにしましたが上手くアップロー度ができません。

コードを見て下さい。大事なところだけ抜粋しています。

python

1####################### 2##### app/urls.py ##### 3####################### 4 5from . import views # 下のコードブロックで定義したものをimportしています 6 7app_name = 'app' 8 9urlpatterns = [ 10 path('', views.index, name='index'), # index 画面 11 path("upload/", views.img_upload, name='upload'), # Ajaxのアップロード先 12]

python

1######################## 2##### app/views.py ##### 3######################## 4 5from .models import Img # モデルです。下のコードブロックで定義します 6from .forms import DocumentForm # アップロード時のフォームです。2個下で定義します 7 8def img_upload(request): 9 if request.method == 'POST': 10 upload_model = Img() # 新規モデルの作成 11 imgform = DocumentForm(request.POST, request.FILES, instance=upload_model) 12 13 if imgform.is_valid(): 14 imgform.save() 15 16 return HttpResponse(upload_model.uuid) # アップロードした画像のUUIDを返す

python

1######################### 2##### app/models.py ##### 3######################### 4 5class Img(models.Model): 6 uuid = models.UUIDField(primary_key=True, default=uuid4, editable=False) # uuidフィールド 7 photo = models.ImageField(upload_to='imgs/', default='defo') # 画像フィールド

python

1######################## 2##### app/forms.py ##### 3######################## 4 5from .models import Img # 上のコードブロックで定義したコード 6 7class DocumentForm(forms.ModelForm): 8 class Meta: 9 model = Img 10 fields = ('photo',)

html

1<!-- 2######################################## 3##### app/templates/app/index.html ##### 4######################################## 5--> 6 7<form method="post" enctype="multipart/form-data" class="form" action="{% url 'app:upload' %}"> 8 {% csrf_token %} 9 <p> 10 <input type="file" name="photo" id="id_photo" class="file-button"> 11 </p> 12 <button type="submit" id=>Upload</button> 13</form> 14<div id="result"></div><!--アップロード結果を表示するためのdiv--> 15 16<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 17<script src="{% static 'js/index.js' %}"></script><!--下のコードブロックに記したJSコード-->

javascript

1/* 2################################## 3##### app/static/js/index.js ##### 4################################## 5*/ 6$("form").submit(function(event) { 7 event.preventDefault(); 8 var form = $(this); 9 $.ajax({ 10 url: form.prop("action"), 11 method: form.prop("method"), 12 data: form.serialize(), 13 processData: false, 14 contentType: false, 15 timeout: 5000, 16 }) 17 .done( function(data) { 18 $("#result").text(data); 19 }) 20 .fail( function() { 21 $("#result").text("failed") 22 }) 23});

このようなコードでpython manage.py runserverを実行し、繋げ、アップロードボタンを押しても、Failedとかえってきます。
サーバー上にも画像はアップロードされていません。
サーバー側のログには

Forbidden (CSRF token missing or incorrect.): /upload/ [*/*/* *:*:*] "POST /upload/ HTTP/1.1" 403 *

と書かれています。
どのように間違っているのかを教えて下さい。
お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

今更$.ajaxを利用するよりfetchで十分ですけどね
ファイル自体はformdataで渡してください

投稿2020/11/24 06:57

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問