как загрузить файл изображения и отобразить его

Question

Я хочу знать, как загрузить и отобразить изображение.

У меня есть классы в views.py.

class ArticleUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
    model = Article
    fields = ('title', 'body', 'image', 'source_url')
    template_name = 'article_edit.html'

    def test_func(self):
        obj = self.get_object()
        return obj.author == self.request.user


class ArticleCreateView(LoginRequiredMixin, CreateView):
    model = Article
    template_name = 'article_new.html'
    fields = ('title', 'body', 'image', 'source_url')
    login_url = 'login'

    def test_func(self):
        obj = self.get_object()
        return obj.author == self.request.user

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

И соответствующие классы в models.py выглядят следующим образом.

class Article(models.Model):
    title = models.CharField(max_length=255)
    body = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    image = models.ImageField(
        upload_to='media/', null=True, blank=True)
    source_url = models.URLField(blank=True, null=True, max_length=300)
    author = models.ForeignKey(get_user_model(), on_delete=models.CASCADE,)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('article_detail', args=[str(self.id)])


class Comment(models.Model):
    article = models.ForeignKey(Article,
                                on_delete=models.CASCADE, related_name='comments', )
    comment = models.CharField(max_length=140)
    author = models.ForeignKey(get_user_model(), on_delete=models.CASCADE),


    def __str__(self):
        return self.comment


    def get_absolute_url(self):
        return reverse('article_list')

Файл article_list.html:

    {% extends 'base.html' %}
    {% load static %}
    {% block title %}Articles{% endblock title %}

    {% block content %}
      {% for article in object_list %}
        <div class="card">
          <div class="card-header">
            <span class="font-weight-bold">{{ article.title }}</span> &middot;
            <span class="text-muted">by {{ article.author }} |
            {{ article.date }}</span>
          </div>
          <div class="card-body">
            {{ article.body|linebreaks}}
                    {% comment %} {% if article.image.url|length > 0 %}
                        <img src="{{ article.image.url }}" width="200px">
                    {% else %}
                        <img src="{% static '/media/mrDoctor.jpg'  %}" width="200px" />
                    {% endif %}  {% endcomment %}
                    <img src="{% static 'articles/mrDoctor.jpg' %}" alt="Image" width="200px" />

                    <a href="{{ article.source_url }}">Link</a>
                    <a href="{% url 'article_edit' article.pk %} ">Edit</a>
                    <a href="{% url 'article_delete' article.pk %}">Delete</a>
          </div>
                <div class="card-footer">
                    {% for comment in article.comments.all %}
                        <p>
                            <span class="font-weight-bold">
                                {{ comment.author }} &middot;
                            </span>
                            {{ comment }}
                        </p>
                    {% endfor %}
                </div>
        </div>
        <br />
      {% endfor %}
    {% endblock content %}

Пользователь может выбрать файл изображения из формы.

Я не могу отобразить изображение, выбранное из формы ввода, показанной выше на снимке экрана. Я хочу отображать изображения динамически, то есть когда пользователь выбирает файл изображения из формы ввода. Я знаю, что должен изменить часть: {% static '/media/mrDoctor.jpg'%}. Когда я попробовал закомментированную часть article_list.html, то есть {% if article.image.url | length> 0%}, это не сработало. Я буду признателен, если вы поможете мне решить проблему. Большое спасибо.

После отражения предложений @Hybrid я смог показать изображение в первой статье, но во второй и третьей показаны только имена файлов.

Answer 1

Вы можете сделать это, используя JavaScript для определения, когда пользователь выбирает изображение, а затем динамически заменяя <img /> теги src.

Пример кода:

<img id="image" />
<input id="files" type="file" />

<script>
document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};
</script>