如何使用 Django 和 AJAX 显示上传的图像
Posted
技术标签:
【中文标题】如何使用 Django 和 AJAX 显示上传的图像【英文标题】：How to display the uploaded image using Django and AJAX 【发布时间】：2019-10-29 16:45:54 【问题描述】：我正在创建一个表单，允许用户选择图像并使用 Django 和 AJAX 上传它。这个过程工作正常，但问题是上传的图像没有显示在屏幕上，但我确实为它指定了div。
这些是我遵循的步骤：
创建处理上传图片的模型。 为函数创建路径。 创建上传所选图片的函数。 创建模板和 AJAX 函数。models.py：
class photo(models.Model):
title = models.CharField(max_length=100)
img = models.ImageField(upload_to = 'img/')
home.html:
<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>
<div id="photo">
<h2> photo.title </h2>
<img src=" photo.img.url " >
</div>
$('#ajax').submit(function(e)
e.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('gd job');
$("#photo").html('<h2> '+data.title+'</h2> <img src="'+data.img.url+ '" >')
);
return false;
);
views.py：
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()
# return render(request, 'home2.html')
return HttpResponse(photo)
我期望用户上传图片和我存入数据库的图片后，图片一定要显示在屏幕上。
【问题讨论】：
你正试图按照我那天建议的那样显示图像。在这里检查：***.com/questions/56493419/…正确检查我的答案你犯了一个小错误 @chiragsoni 是的，你是对的，我尝试了你的答案，但它没有显示它，我也没有找到错误。但我怀疑错误出在 success 函数 您正确地按照我的回答，您将能够解决它。祝你好运！ @chiragsoni 仍然没有找到错误的确切位置，因为当我调试它的工作时，它应该没有显示图像。 兄弟我真的很抱歉，但通常情况下，只有当您欣赏他们的回答时，人们才会愿意回答和帮助您，对吧？我已经花时间在这里帮助你了：***.com/questions/56493419/…，但你没有赞赏。请养成欣赏他人的习惯，以始终获得好的答案。这只是为了您的利益。 【参考方案1】：要使用 ImageField，您必须安装 Pillow
pip install pillow
让我们检查一下您的代码并稍作修改。
models.py
from django.db import models
# Create your models here.
class Photo(models.Model):
title = models.CharField(max_length=100) # this field does not use in your project
img = models.ImageField(upload_to='img/')
views.py 我将您的视图分成两个视图。
from django.shortcuts import render
from django.http import HttpResponse
from .models import *
import json
# Create your views here.
def home(request):
return render(request, __package__+'/home.html', )
def upload(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
uploaded_image = Photo(img=image)
uploaded_image.save()
response_data =
'url': uploaded_image.img.url,
return HttpResponse(json.dumps(response_data))
urls.py
from django.urls import path
from .views import *
from django.conf.urls.static import static
from django.conf import settings
app_name = __package__
urlpatterns = [
path('upload/', upload, name='upload'),
path('', home, name='home'),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
settings.py
MEDIA_URL = '/img/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'img')
home.html
% load static %
<html>
<head>
<script src="% static 'photo/jquery-3.4.1.js' %"></script>
<script>
$(document).ready(function()
$('#ajax').submit(function(e)
e.preventDefault(); // disables submit's default action
var data = new FormData($('#ajax').get(0));
console.log(data);
$.ajax(
url: '/upload/',
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(data)
data = JSON.parse(data); // converts string of json to object
$('#photo').html('<img src="'+data.url+ '" />');
// <h2>title</h2> You do not use 'title' in your project !!
// alt=title see previous comment
);
return false;
);
);
</script>
</head>
<body>
<form method="POST" id="ajax">
% csrf_token %
Img:
<br />
<input type="file" name="img" />
<br />
<br />
<button id="submit" type="submit">Add</button>
</form>
<h1> test </h1>
<div id="photo"></div>
</body>
</html>
不要在javascript中使用模板变量'+data.title+'！ 向 HttpResponse() 发送一个字符串作为参数，在 return HttpResponse(photo) 中，照片是一个对象。
【讨论】：
这是解决方案，谢谢。所以如果我想像相册一样上传几张照片，它的逻辑和过程是一样的吗？ 是的，您也可以在 html 表单和脚本中使用 'class' 而不是 'id'。类似$('.ajax').each(function () $(this).submit( todo ); );
这个答案很棒，谢谢 shmako***。我正在寻找这一行“ $('#photo').html('');”。你为我节省了很多精力。【参考方案2】：
对于多种形式：
views.py
def home(request):
context =
'range': range(3),
return render(request, __package__+'/home.html', context)
home.html
% load staticfiles %
<html>
<head>
<script src="% static 'photo/jquery-3.4.1.js' %"></script>
<script>
$(document).ready(function()
$('.ajax').each(function ()
$(this).submit(function (e)
e.preventDefault(); // disables submit's default action
var data = new FormData($(this).get(0));
var imageForm = $(this);
$.ajax(
url: '/upload/',
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(data)
data = JSON.parse(data); // converts string of json to object
imageForm.parent().find('.photo').html('<img src="'+data.url+ '" />');
console.log(imageForm);
);
return false;
);
);
);
</script>
</head>
<body>
% for i in range %
<div style="border: 1px solid black">
<form method="POST" class="ajax">
% csrf_token %
<div class="upload-label">Img- i :</div>
<input type="file" name="img" />
<br />
<br />
<button class="submit" type="submit">Add</button>
</form>
<div class="image-label"> Image: </div>
<div class="photo">No image yet</div>
</div>
% endfor %
</body>
</html>
【讨论】：
它给了我Uncaught SyntaxError: Unexpected token p in JSON at position 0 错误。有什么想法吗？以上是关于如何使用 Django 和 AJAX 显示上传的图像的主要内容，如果未能解决你的问题，请参考以下文章
上传文件后，如何在 Django 中使用 AJAX 更新表（与 JavaScript 链接）？
如何从 Django 视图中获取价值到 Ajax 成功函数中