Как настроить django поле ввода изображения в HTML - PullRequest
0 голосов
/ 15 января 2019

У меня есть django-форма с ImageField, которую я отображаю в HTML-шаблоне.Первоначально, используя этот код, я мог успешно загрузить изображение:

{% for field in form %}
  {% if field == form.image %}
    {{ field.label_tag }}
    {{ form.image }}

Но мне не понравился стиль django, поэтому я настроил его с помощью Bootstrap 4. Это обновленный HTML:

{% for field in form %}
  {% if field == form.image %}
    <label class="btn btn-primary" for="my-file-selector">
      <input id="my-file-selector" type="file" style="display:none" 
              onchange="$('#upload-file-info').html(this.files[0].name)">
            Choose an image
    </label>
    <span class='label label-info' id="upload-file-info"></span>

Теперь стиль правильный, но изображение не будет успешно загружено.Вернее, я могу выбрать изображение, но когда я отправляю плейлист, оно не будет занесено в базу данных, и поэтому я не могу его отобразить.Как я могу использовать этот стиль, но при этом успешно загружать изображения?

Это мой код views.py:

def new_playlist(request): 
"""Add a new playlist."""
    if request.method != 'POST':
        # No data submitted; create a blank form.
        form = AddPlaylistForm()
    else:
        form = AddPlaylistForm(request.POST)
        if form.is_valid:
            form.save()
            return redirect("/great_songs/playlists")

И мой models.py:

class Playlist(models.Model):
    """Allow a user to create a customized list of songs."""
    name = models.CharField(max_length=100)
    image = models.ImageField(upload_to='playlists/%Y/%m/%d', blank=True, null=True)
    songs = models.ManyToManyField('Song')
    description = models.TextField(blank=True, null=True)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        """String for representing the model object."""
        return self.name

    def get_absolute_url(self):
        """Returns the url to access a detail record for this song."""
        return reverse('playlist-detail', args=[str(self.id)])
...