teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Ajaxでrequest.FILESのデータを送りたい

編集履歴

質問編集履歴

2

内容を修正しました。

2021/11/24 15:58

投稿

akane_emo
akane_emo

スコア30

test CHANGED
@@ -1 +1 @@
1
- FileFieldでファイルを指定してもis_validがFalseになってしまいます。
1
+ Ajaxでrequest.FILESのデータを送りたい
test CHANGED
@@ -2,7 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- ファイルを選択（複数可）し、ファイルが入力されていたらis_valid内の処理を実行させたいです。
5
+ ファイルを選択（複数可）し、ファイルが入力されていたらis_valid内の処理をAjaxで行いたいです。
6
+
7
+ is_valid内の処理は出来ています。
8
+
9
+ 問題なのはHTML(template)の記述になります。
6
10
 
7
11
 
8
12
 
@@ -10,61 +14,161 @@
10
14
 
11
15
 
12
16
 
13
- ファイルを選択しても必ずform.is_validの結果がFalseになってしまいます。
17
+ 私が行いたい処理だと読み込んだファイルをAjax処理時に送らないといけないのですが
18
+
19
+ 私の記述だとファイルを渡すようにはなっていないようです。。
20
+
21
+ FormDataオブジェクトを使用すれば良いということまでは調べれたのですが
22
+
23
+ javaScriptの知識が乏しく良くわかりません。
14
24
 
15
25
 
16
26
 
17
- 何をしても上手くいかなかったため、最終的にDjangoのドキュメントをそのままコピーして使用してみたのですが
18
-
19
- それでも結果はFalseのままです。
20
-
21
- 実行時にrequest.FILES.getlist('file_field')の中身をprintで確認すると[]となっていたので空と認識されて
22
-
23
- しまっているためFalseとなっているようなのですが原因がわかりません。
24
-
25
- View,Formsはドキュメントそのままなのでtemplateが悪いのではないかと思ってはいるのですが、
26
-
27
- 何が悪いのかがわかりません。
28
27
 
29
28
 
30
-
31
- 教えて頂けますでしょうか。
29
+ 分かる方教えて頂けますでしょうか。
32
30
 
33
31
  よろしくお願いいたします。
34
32
 
35
33
 
36
34
 
37
- ***追記***
38
-
39
- form.errorsで確認した結果以下になりました。
40
-
41
- <ul class="errorlist"><li>file_field<ul class="errorlist"><li>このフィールドは必須です。</li></ul></li></ul>
42
-
43
- やはり入力したファイルが認識されていないようです。。
44
-
45
-
46
-
47
- ### 該当のソースコード
48
-
49
35
 
50
36
 
51
37
  ```template
52
38
 
39
+ <div>
40
+
53
- <form action="" method="post" enctype="multipart/form-data">
41
+ <form action="{% url 'index_webedi'%}" method="post" enctype="multipart/form-data">
54
42
 
55
43
  {% csrf_token %}
56
44
 
57
45
 
58
46
 
59
- {{ form }}
47
+ <div class="upload-area">
60
48
 
61
- <br>
49
+ {{ form }}
62
50
 
63
- <br>
51
+ <br>
64
52
 
53
+ <br>
54
+
65
- <button class="btn btn-primary mt-1" type="submit">アップロード</button>
55
+ <button class="btn btn-primary mt-1" id="submit-btn">アップロード</button>
56
+
57
+ </div>
58
+
59
+ <br>
66
60
 
67
61
  </form>
62
+
63
+
64
+
65
+ <div id="result">
66
+
67
+ <!-- Will be replaced with inputed text by Ajax -->
68
+
69
+ </div>
70
+
71
+
72
+
73
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
74
+
75
+ <script>
76
+
77
+
78
+
79
+ function getCookie(name) {
80
+
81
+ var cookieValue = null;
82
+
83
+ if (document.cookie && document.cookie !== '') {
84
+
85
+ var cookies = document.cookie.split(';');
86
+
87
+ for (var i = 0; i < cookies.length; i++) {
88
+
89
+ var cookie = jQuery.trim(cookies[i]);
90
+
91
+ // Does this cookie string begin with the name we want?
92
+
93
+ if (cookie.substring(0, name.length + 1) === (name + '=')) {
94
+
95
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
96
+
97
+ break;
98
+
99
+ }
100
+
101
+ }
102
+
103
+ }
104
+
105
+ return cookieValue;
106
+
107
+ }
108
+
109
+
110
+
111
+ var csrftoken = getCookie('csrftoken');
112
+
113
+
114
+
115
+ function csrfSafeMethod(method) {
116
+
117
+ // these HTTP methods do not require CSRF protection
118
+
119
+ return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
120
+
121
+ }
122
+
123
+
124
+
125
+ $.ajaxSetup({
126
+
127
+ beforeSend: function (xhr, settings) {
128
+
129
+ if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
130
+
131
+ xhr.setRequestHeader("X-CSRFToken", csrftoken);
132
+
133
+ }
134
+
135
+ }
136
+
137
+ });
138
+
139
+
140
+
141
+ // 送信ボタンにイベントリスナーを設定。内部に Ajax 処理を記述
142
+
143
+ $("form").submit(function(event) {
144
+
145
+ event.preventDefault();
146
+
147
+ var form = $(this);
148
+
149
+ $.ajax({
150
+
151
+ url: form.prop("action"),
152
+
153
+ method: form.prop("method"),
154
+
155
+ data: form.serialize(),
156
+
157
+ timeout: 10000,
158
+
159
+ dataType: "text",
160
+
161
+ })
162
+
163
+ .done(function(data) {
164
+
165
+ $("#result").append("<p>" + data + "</p>");
166
+
167
+ })
168
+
169
+ });
170
+
171
+ </script>
68
172
 
69
173
  ```
70
174
 
@@ -85,43 +189,3 @@
85
189
  widget=forms.ClearableFileInput(attrs={'multiple': True}))
86
190
 
87
191
  ```
88
-
89
-
90
-
91
- ```views
92
-
93
- class UploadOrderView(FormView):
94
-
95
- template_name = 'index.html'
96
-
97
- form_class = UploadFileForm
98
-
99
- success_url = 'index.html'
100
-
101
-
102
-
103
- def post(self, request, *args, **kwargs):
104
-
105
- form_class = self.get_form_class()
106
-
107
- form = self.get_form(form_class)
108
-
109
- files = request.FILES.getlist('file_field')
110
-
111
- print(files) # この中身が空
112
-
113
- if form.is_valid():
114
-
115
- print("OK")
116
-
117
- for f in files:
118
-
119
- print(f)
120
-
121
- return self.form_valid(form)
122
-
123
- else:
124
-
125
- return self.form_invalid(form)
126
-
127
- ```

1

追加情報

2021/11/24 15:57

投稿

akane_emo
akane_emo

スコア30

test CHANGED
File without changes
test CHANGED
@@ -31,6 +31,16 @@
31
31
  教えて頂けますでしょうか。
32
32
 
33
33
  よろしくお願いいたします。
34
+
35
+
36
+
37
+ ***追記***
38
+
39
+ form.errorsで確認した結果以下になりました。
40
+
41
+ <ul class="errorlist"><li>file_field<ul class="errorlist"><li>このフィールドは必須です。</li></ul></li></ul>
42
+
43
+ やはり入力したファイルが認識されていないようです。。
34
44
 
35
45
 
36
46