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

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

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

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

Python

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

Q&A

0回答

1707閲覧

【ハマりました】Django formを使った画像upload機能がうまく実装できない

tonytony

総合スコア11

Django

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

Python

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

0グッド

0クリップ

投稿2020/06/27 23:16

概要

djangoにてwidget_tweaksを用いてformをtemplateに表示させてcssを適用させています。
しかし画像アップロードがformのデフォルト設定が出てきてしまい、うまく表示できていません。
「アイコンを選択」の箇所を押したらアップロードできるようにしたいです。
一通り検索したのですが、どこにも情報がなく、、、。
わかる方教えていただけると嬉しいです。

うまくいってない画面

イメージ説明

コード

html

1 <div class="custom-file"> 2 <div class="upload-portfolio-image-btn"> 3 <label class="custom-file-label" for="customFile">アイコンを選択</label> 4 </div> 5 {% render_field form.icon class="custom-file-input upload-portfolio-image" id="customFile" %} 6 <hr> 7 <div class="form-row portfolio-image-group"> 8 <!-- ここで画像をプレビュー --> 9 </div> 10 </div>

forms.py

1class ProfileForm(forms.ModelForm): 2 def __init__(self, *args, **kwargs): 3 super(ProfileForm, self).__init__(*args, **kwargs) 4 for field in self.fields.values(): 5 field.widget.attrs["class"] = "form-control" 6 field.widget.attrs['placeholder'] = field.label 7 8 username = forms.CharField(required=True, label="username") 9 CHOICES = ( 10 ('female', '女の子',), 11 ('male', '男の子',), 12 ) 13 gender = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES, required=True) 14 15 age = forms.IntegerField(validators=[MinValueValidator(12), MaxValueValidator(120)], required=False, label=20) 16 17 CHOICES2 = ( 18 ('PS4', 'PS4',), 19 ('PC', 'PC',), 20 ('swich', 'swich',), 21 ('xbox', 'xbox',), 22 ('mobile', 'スマホ',) 23 ) 24 game_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES2, required=False) 25 26 CHOICES3 = ( 27 ('OK', 'できる'), 28 ('Friend', '仲良くなってから'), 29 ('Listen_only', '聞き専',), 30 ('TIME', '時間による',), 31 ('NG', 'できない',) 32 ) 33 voice = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES3, required=False) 34 35 CHOICES4 = ( 36 ('discode', 'discode'), 37 ('line', 'line'), 38 ('skype', 'skype',), 39 ('kakao', 'カカオトーク',), 40 ('NG', 'できない',) 41 ) 42 voice_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES4, required=False) 43 44 CHOICES5 = ( 45 ('gati', 'ガチ'), 46 ('enjoy', 'エンジョイ'), 47 ('which', 'どちらでも',), 48 ) 49 play_style = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES5, required=False) 50 play_time = forms.CharField(max_length=50, required=False, label='平日は夜・休日は一日中') 51 52 CHOICES6 = ( 53 ('1', '1 はじめて'), 54 ('2', '2 苦手'), 55 ('3', '3 普通'), 56 ('4', '4 得意',), 57 ('5', '5 職人',) 58 ) 59 craft_level = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES6, required=False) 60 61 one_message = forms.CharField(max_length=200, required=False, label='よろしくね!') 62 63 # 後で追加情報追記 64 class Meta: 65 model = Profile 66 fields = ( 67 'username', 'icon', 'gender', 'age', 'game_device', 'voice', 'voice_device', 'play_style', 'play_time', 68 'craft_level', 'one_message')

models.py

1class Profile(models.Model): 2 # 性別,年齢,ゲームデバイス,通話可能か,通話デバイス,プレイスタイル,プレイ時間帯,建築レベル,一言メッセージ 3 id = models.OneToOneField(User, primary_key=True, on_delete=models.CASCADE) 4 username = models.CharField(_('user name'), null=True, max_length=20, blank=True) 5 icon = models.ImageField(default='/icon/default.jpg', blank=True, null=True, upload_to='icon') 6 gender = models.CharField(max_length=20, null=True, blank=True) 7 age = models.IntegerField(validators=[MinValueValidator(12), MaxValueValidator(120)], null=True, blank=True) 8 game_device = models.CharField(max_length=30, null=True, blank=True) 9 voice = models.CharField(max_length=30, null=True, blank=True) 10 voice_device = models.CharField(max_length=30, null=True, blank=True) 11 play_style = models.CharField(max_length=30, null=True, blank=True) 12 play_time = models.CharField(max_length=30, null=True, blank=True) 13 craft_level = models.CharField(max_length=30, null=True, blank=True) 14 one_message = models.CharField(max_length=200, null=True, blank=True) 15 16 def __str__(self): 17 return self.username

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問