如何使用django和ajax在屏幕上显示上传的图像

我正在尝试使用ajax在django中上传图像，并将其保存在指定路径中。图像已上载并保存，但问题是它没有显示在模板中

我将媒体根目录和媒体URL添加到设置文件中 我创建了一个模型 我在URL文件中创建了一个路径 我在视图文件中创建了一个函数 我用html创建了一个模板，并使用ajax和jquery

models.py url.py views.py home2.html

功能上传（事件）{
event.preventDefault（）；
var data=newformdata（$（'#ajax'）.get（0））；
console.log（数据）
$.ajax({
url:“/upload/”，
键入：“POST”，
数据：数据，
contentType:“多部分/表单数据”，
processData:false，
contentType:false，
成功：功能（数据）{
警惕（“成功”）；
}
});
返回false；
}
{%csrf_令牌%}
Img：






添加
试验
{{photo.title}

---

我希望看到上传的图像显示在屏幕上，但在我上传并提交表单后，src图像仍然为空。

您应该做几件事，，，正如我看到的，您希望使用

Ajax

调用，而不必使用

。此外，您还应该将

csrfmiddlewaretoken

密钥从

payload

发送到服务器（在

httppost

请求期间）。您应该将数据从客户端发送到服务器，服务器发回新图像的url，并且您应该使用

javascript

更新

DOM

html

---

希望它能帮助您。

您应该做几件事，，，正如我看到的，您希望使用

Ajax

调用，而不需要使用

。此外，您还应该将

csrfmiddlewaretoken

密钥从

payload

发送到服务器（在

httppost

请求期间）。您应该将数据从客户端发送到服务器，服务器发回新图像的url，并且您应该使用

javascript

更新

DOM

html

---

希望对您有所帮助。

首先将这些模板行环绕在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 }}">')

$（“#photo”）.html（'{{'+data.title+'}}
')

首先在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 }}">')

$（“#photo”）.html（'{{'+data.title+'}}
')

检查我的答案您只需要对实现的内容进行少量更改。检查我的答案您只需要对实现的内容进行少量更改。

<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)

$("#photo").html('<h2> {{'+data.title+'}}</h2>
     <img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')