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

# views.py

from django.shortcuts import render
from django.http import JsonResponse

def upload_image(request):
    if request.method == 'POST' and request.FILES['image']:
        image = request.FILES['image']
        
        # 这里可以进行图片的保存、处理等操作

        return JsonResponse({'success': True, 'image_url': image.url})
    
    return JsonResponse({'success': False})

// main.js

function uploadImage() {
    var formData = new FormData();
    var fileInput = document.getElementById('image-input');
    formData.append('image', fileInput.files[0]);

    $.ajax({
        url: '/upload_image/',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                var imageElement = document.getElementById('uploaded-image');
                imageElement.src = response.image_url;
                imageElement.style.display = 'block';
            } else {
                alert('上传失败！');
            }
        },
        error: function() {
            alert('请求失败！');
        }
    });
}

<!-- index.html -->

<form enctype="multipart/form-data">
    <input type="file" id="image-input" name="image">
    <button type="button" onclick="uploadImage()">上传图片</button>
</form>

<img id="uploaded-image" style="display: none;">