标题中包含所有内容,因此在进行进一步解释之前,请先输入我的代码。
{% 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>
时,我已经遇到了此错误,现在我被卡在了这里。
[已解决]经过一番搜索,阅读了我的代码并进行了一些尝试之后,我发现代码中出现了一些错误。这是有效的代码:
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],因为我当时仅上传一个文件!我希望我的错误可以帮助其他人。
见!问题已解决,至少对于文件上传而言!