如何使用django和ajax在屏幕上显示上载的图像 [英] how to display uploaded image on the screen using django and ajax
问题描述
我正在尝试使用ajax在django中上传图像并将其保存在指定的路径中.图片已上传并保存，但问题是它没有显示在模板中.
I'm trying to upload image in django using ajax and to save it in a specified path. the image is uploaded and saved but the problem is that it doesn't display in the template.
我将MEDIA ROOT&媒体网址我创建一个模型我在urls文件中创建一个路径我在视图文件中创建一个函数我用html创建模板，并使用ajax和jquery.
i added to the settings file the MEDIA ROOT & Media URL i create a model i create a path in the urls file i create a function in the views file i create a template with html and use the ajax and jquery.
class photo(models.Model):
title = models.CharField(max_length=100)
img = models.ImageField(upload_to = 'img/')
urls.py
来自django.contrib的
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
来自django.shortcuts的
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图像仍然为空.
i expect to see the uploaded image displayed on the screen but the src image stay empty after i upload and submit the form.
推荐答案
首先将模板的这些行围绕在div标签下，如下所示:
First surround these lines of template under div tag like this:
<div id="photo">
<h2> {{ photo.title }}</h2>
<img src="{{ photo.img.url }}" alt="{{ photo.title }}">
</div>
对视图功能进行如下更改:
Do few changes in view function like this:
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成功函数中添加以下代码:
Now in the ajax success function add this code:
$("#photo").html('<h2> {{'+data.title+'}}</h2>
<img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')
这篇关于如何使用django和ajax在屏幕上显示上载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
