使用Ajax无需jQuery即可解决Django的已上传文件

问题描述 投票:0回答:1

标题中包含所有内容,因此在进行进一步解释之前,请先输入我的代码。

{% extends 'informations/userpage.html' %}
{% load static %}
{% block redaction %}
<div class="redaction">
    <form method="POST" enctype="multipart/form-data" action="/redaction/" class="article-post">
        {% csrf_token %}
        <div class="article-picture">
            {% if article.image %}
                {{article.image}}
            {% else %}
                <img class="generic-image" src="{% static 'informations/images/none-picture.svg' %}" alt="Image article">
            {% endif %}
                <img class="edit" id="article-image" src="{% static 'informations/images/edit.svg' %}">
        </div>
        <div id="id01" class="modal" style="display: none;">
            <div class="upload-container">
                <input type='file' name="newImage">
                <div class="button" id="uploadImage" name="upload" value="envoyer">Envoyer</div>
            </div>
        </div>
    </form>
    {% csrf_token %}
    <script id="picturesend">
        var csrf_token = document.getElementsByName('csrfmiddlewaretoken').value
    </script>
    <script type="text/javascript"
            id="django-admin-popup-response-constants"
            src="{% static 'informations/redaction.js' %}">
    </script>
</div>
{% endblock %}
var articleImage = document.getElementById('article-image');
var uploadImage = document.getElementById('uploadPic');

uploadImage.addEventListener('click', displayUpload);
articleImage.addEventListener('click', displayUpload);

function displayUpload() {
    var uploadfile = document.getElementById('id01');
    var uploadPicture = document.getElementById('uploadImage');
    uploadPicture.addEventListener('click', uploadFile);
    uploadfile.style.display='block'
}

function uploadFile() {
    var formData = new FormData();
    var file = document.getElementsByName('newImage');
    var image = document.getElementsByClassName('generic-image')[0];
    formData.append('newImage', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            image.setAttribute('src',JSON.parse(xhr.responseText));
        } else {
            alert('An error occurred!');
        }
    };
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
    xhr.send(formData);
}

我的文件模型

def userDirectoryPath(instance, filename):
    # file will be uploaded to MEDIA_ROOT/user_<id>/<filename>
    return 'user_{0}/{1}'.format(instance.user.username, filename)

class Media(models.Model):
    user = models.ForeignKey(User, null=True , on_delete=models.CASCADE)
    media = models.FileField(upload_to=userDirectoryPath)

我的视图处理ajax。

@login_required
def upload_media(request):
    user = request.user
    data = {}

    if request.POST:
        newFile = Media()
        newFile.media = request.FILES['newImage']
        newFile.user = user
        newFile.save()
        data.update({"media_url": newFile.media.url})

    return JsonResponse(data)

所以现在我需要做的一些解释是,没有JQuery,将文件发送到我的服务器,注册该文件并在数据库中添加一个条目,然后使用JsonResponse返回url以执行我需要做的事情,使用javascript。

我是所有这些技术的初学者,我有意在没有Jquery的情况下进行操作。我知道我的代码编写并没有真正遵循最佳实践,但我希望它是可以理解的。

我发送的代码的问题是,当我查看console.log(xhr.responseText);时看到了{},因此似乎无法理解request方法是POST方法,因此我尝试了[ C0]我得到了相同的结果。由于我并不真正了解有关ajax的所有知识,因此我认为问题出在我的JavaScript代码上。我已经在Internet上进行了一些搜索,但是得到的只是JQuery的示例,我没有使用。

因此,如果有人看到任何解决方案,或者知道我可以从哪里获得解决方案,我将非常感激,当然,如果您需要更多详细信息,我会满足您的需求。

感谢阅读,并最终对我有所帮助。

[UPDATE]

使用if request.method == 'POST':,条件为True,但如果得到request.method == "POST",则会发生错误当我使用MultiValueDictKeyError at /upload/ newImage并忘记了<form>时,我已经遇到了此错误,现在我被卡在了这里。

javascript django ajax
1个回答
0
投票

[已解决]经过一番搜索,阅读了我的代码并进行了一些尝试之后,我发现代码中出现了一些错误。这是有效的代码:

enctype="multipart/form-data"

不需要线function uploadFile() { var formData = new FormData(); var file = document.getElementsByName('newImage')[0]; var image = document.getElementsByClassName('generic-image')[0]; formData.append('newImage', file.files[0], file.files[0].name); var xhr = new XMLHttpRequest(); xhr.open("POST", '/upload/', true); xhr.onload = function () { if (xhr.status === 200) { console.log(xhr.responseText); image.setAttribute('src',JSON.parse(xhr.responseText)); } else { alert('An error occurred!'); } }; xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken')); xhr.send(formData); } 并获取文件,您需要使用输入的属性文件

javascript xhr.setRequestHeader('Content-Type', file.type);

files [0],因为我当时仅上传一个文件!我希望我的错误可以帮助其他人。

见!问题已解决,至少对于文件上传而言!

© www.soinside.com 2019 - 2024. All rights reserved.