#python #django
#python #django
Вопрос:
У меня есть часть сайта, над которой я работаю, где пользователь может загрузить изображение. Я использую ModelForm для загрузки изображения, но мне нужно изменить саму форму, чтобы добавить стиль из CSS-фреймворка, который я использую (Bulma). Когда я отображаю форму из шаблона as {{ pic_form.as_p }}
, она действительно ведет себя так, как я хочу: она показывает кнопку загрузки файла, и когда вы выбрали файл (перед нажатием кнопки отправки), он показывает имя этого файла, чтобы пользователь мог видеть, что изображение действительно выбрано.
Я несколько раз безуспешно пытался найти эту проблему в Интернете, и я попытался заглянуть в инспектор в браузере, чтобы увидеть html-код, который генерируется Django с использованием {{ pic_form.as_p }}
опции, но это выглядит так же, как делать это таким образом.
Это код шаблона, который у меня есть для этой формы:
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="field">
{{ pic_form.non_field_errors }}
<label class="label" for="{{ pic_form.image.id_for_label }}">Upload an image</label>
<div class="file has-name is-small">
{{ pic_form.image.errors }}
<label class="file-label">
{{ pic_form.image }}
<span class="file-cta">
<span class="file-icon">
{% fa5_icon 'upload' 'fas' %}
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
{{ pic_form.image.name }}
</span>
</label>
</div>
</div>
<div class="field">
{{ pic_form.description.errors }}
<label class="label" for="{{ pic_form.description.id_for_label }}">Description</label>
{{ pic_form.description }}
</div>
<div class="field">
<button class="button is-small is-outlined is-primary is-light" type="submit">Add picture</button>
</div>
</form>
Мне нужно, чтобы имя файла отображалось в разделе span с классом file-name, но я не могу понять, как получить это имя. Код, который находится там прямо сейчас, просто дает мне «изображение», что имеет смысл, поскольку это буквальное имя поля.
Если у кого-нибудь есть идеи, как я могу отобразить имя файла до его фактического сохранения в базе данных, это было бы здорово, я действительно в недоумении. Спасибо за чтение.
Редактировать: я понял, что это тоже может быть полезно, модель формы, которую я использую.
class PictureForm(forms.ModelForm):
class Meta:
model = Picture
widgets = {
'image': forms.ClearableFileInput(attrs={'class': 'file-input'}),
'description': forms.TextInput(attrs={'class': 'input'})
}
Вот как сейчас выглядит мой:
версия, созданная приведенным выше кодом
И это то {{ form.as_p }}
, что я хотел бы повторить, только со стилем из Bulma: версия, созданная django при использовании их ярлыка формы
Комментарии:
1. Что он печатает сейчас?
{{ image.name }}
2. О, извините, я все перепутал,
{{ image.name }}
ничего не отображает, я думал о{{ form.image.name }}
том, что печатает «изображение» рядом с кнопкой «Выбрать файл …»3. Что вы подразумеваете под именем файла? Пожалуйста, объясните немного.
4. Как и в имени файла в пути. Изображение, которое я использовал для тестирования, было «golden-bear-1.jpg «, так что это было то, что появлялось, когда я выбирал файл, и до того, как я нажал кнопку «Добавить изображение», и что я хотел бы отобразить, чтобы указать, что файл был выбран
Ответ №1:
Вы можете добиться этого, добавив в свою Picture
модель следующее:
import os
....
def image_name(self):
return os.path.basename(self.image.name)
Комментарии:
1. Я не понимаю, как я мог бы получить имя оттуда в шаблоне без предварительного сохранения изображения в базе данных
2. Извините, не понял, что вы хотите отобразить имя перед сохранением его в базе данных… не уверен, что это возможно
3. Да, я не могу понять это, но Django делает это, когда я отображаю форму, используя
{{ form.as_p }}
вместо всего ручного материала форматирование div, чтобы она выглядела как остальная часть моего сайта