как вывести на экран загруженное изображение с помощью django и ajax - PullRequest
Новая
       25

как вывести на экран загруженное изображение с помощью django и ajax

0 голосов
/ 07 июня 2019

Я пытаюсь загрузить изображение в django, используя ajax, и сохранить его по указанному пути.изображение загружено и сохранено, но проблема в том, что оно не отображается в шаблоне.

я добавил в файл настроек URL-адрес MEDIA ROOT & Media я создаю модель и создаю путь в файле urlsя создаю функцию в файле представлений я создаю шаблон с html и использую ajax и jquery.

models.py 

class photo(models.Model):
    title = models.CharField(max_length=100)
    img = models.ImageField(upload_to = 'img/')

urls.py 

from django.contrib import admin
from django.urls import path, include
from.views import *
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home2),
    path('upload/', upload),

views.py 

from django.shortcuts import render,redirect

from django.http import HttpResponse,JsonResponse
from testapp.models import *

import json as simplejson

def upload(request):
    if request.method == 'POST':
        if request.is_ajax():
            image = request.FILES.get('img')
            uploaded_image = photo(img = image)
            uploaded_image.save()

    return render(request, 'home2.html')

home2.html 

<html>
  <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
    <script>
        function upload(event) {
            event.preventDefault();
            var data = new FormData($('#ajax').get(0));
            console.log(data)

            $.ajax({
                url: '/upload/', 
                type: 'POST',
                data: data,
                contentType: 'multipart/form-data',
                processData: false,
                contentType: false,
                success: function(data) {
                    alert('success');
                }
            });
            return false;
        }

    </script>
  </head>

  <body>

    <form method="POST" id="ajax"  enctype="multipart/form-data">
        {% csrf_token %}
        Img:
        <br />
        <input type="file" name="img">

        <br />
        <br />
        <button id="submit"  type="submit">Add</button>

    </form>

     <h1> test </h1>
     <h2> {{ photo.title }}</h2>
     <img src="{{ photo.img.url }}" alt="{{ photo.title }}">

  </body>
</html>

Я ожидаю увидеть загруженное изображение, отображаемое на экране, но изображение src останется пустым после загрузки и отправки формы.

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Сначала окружите эти строки шаблона тегом div следующим образом: 

<div id="photo">
 <h2> {{ photo.title }}</h2>
     <img src="{{ photo.img.url }}" alt="{{ photo.title }}">
</div>

Сделайте несколько изменений в функции вида, например так: 

from django.http import HttpResponse

def upload(request):
    if request.method == 'POST':
        if request.is_ajax():
            image = request.FILES.get('img')
            uploaded_image = photo(img = image)
            uploaded_image.save()
            photo=photo.objects.first()# This will give last inserted photo

    return HttpResponse(photo)

Теперь в функцию успеха ajax добавьте этокод: 

$("#photo").html('<h2> {{'+data.title+'}}</h2>
     <img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')
0 голосов
/ 07 июня 2019

Вы должны сделать несколько вещей ,,, Как я вижу, вы хотите использовать Ajax вызов, не обязательно иметь <form></form> вообще.Кроме того, вы должны отправить csrfmiddlewaretoken ключ на сервер (во время HTTP POST запроса), например, с payload.Вы должны отправить данные с клиента на сервер, сервер отправляет обратно URL нового изображения, и вы должны обновить DOM, используя javascript.

html 

<html>
  <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
  </head>

  <body>

        Img:
        <br />
        <input type="file" name="img" id="img">

        <br />
        <br />
        <button id="submit"  type="submit">Add</button>

    <div id="img_div">

    </div>


    <script>
        $('#submit').click(function() {
            event.preventDefault();
            var formData = new FormData();
            $img = $('#img')[0].files[0];
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
            formData.append('image', $img);
            $.ajax({
                url: '/upload/', 
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    $('#img_div').append('<img src="'+data['image_url']+'" />')
                }
            });
            return false;
        });

    </script>

  </body>
</html>

python 

from django.shortcuts import render,redirect

from django.http import HttpResponse, JsonResponse
from testapp.models import *

import json as simplejson

def upload(request):
    if request.method == 'POST':
        if request.is_ajax():
            image = request.FILES.get('image')
            uploaded_image = photo.objects.create(img=image)
            return JsonResponse({'image_url': uploaded_image.img.url})

    return render(request, 'home2.html')

Надеюсь, это поможет вам.

...