我正在使用 modelForm 通過 ajax 創建帖子物件。圖片欄位是表單的一部分，但不會傳遞給 Meta 類的欄位，因為這將允許先保存帖子并添加之后上傳的圖片。我的問題是，如果我確實使用常規視圖（沒有 ajax），那么 request.FILES 會正確提交，但是當我通過 ajax 使用這些檔案時，這些檔案不是 request.files 的一部分，它會呈現為空<MultiValueDict: {}>，我真的不知道為什么。這是我的代碼。
def post(self, request, *args, **kwargs):
form = PostForm(request.POST or None, request.FILES or None)
result = {}
files = request.FILES
print(files)
if is_ajax(request=request) and form.is_valid():
print("the request is ajax and the form is valid")
title = form.cleaned_data.get("content", "")
print("Title ", title)
post_instance = form.save(commit=False)
post_instance.author = request.user
result['success'] = True
return JsonResponse(result)
$.ajax({
url: $("#CreatePostModal").attr("data-url"),
data:$("#CreatePostModal #createPostForm").serialize(),
method: "post",
dataType: "json",
success: (data) => {
if (data.success) {
setTimeout(() => {
$(e.target).next().fadeOut();
ResetForm('createPostForm', 'PreviewImagesContainer')
$("#CreatePostModal").modal('hide')
$(e.target.nextElementSibling).fadeOut()
alertUser("Post", "has been created successfully!")// alerting the user
}, 1000)
console.log(data.title)
} else {
$("#createPostForm").replaceWith(data.formErrors);
$("#PreviewImagesContainer").html("");
$("#CreatePostModal").find("form").attr("id", "createPostForm");
$(e.target.nextElementSibling).fadeOut()
};
$(e.target).prop("disabled", false);
},
error: (error) => {
console.log(error)
}
})
});
這是表格檔案
class PostForm(forms.ModelForm):
images = forms.ImageField(
required=False,
widget=forms.ClearableFileInput(attrs={
'multiple': True,
})
)
class Meta:
model = Post
fields = ("content",)
widgets = {
"content": forms.Textarea(attrs={"placeholder": "Tell us something today....", "rows": 5, "label": ""})
}
再次，影像域與后模型具有多對多關系。我做錯了什么？
這是我用酥脆的形式渲染表單本身的模態
<!-- create post modal -->
<div class="modal fade" id="CreatePostModal" data-url="{% url 'post-list-view' %}" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Creating Post</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
×
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
{% crispy form %}
<div id="PreviewImagesContainer">
</div>
</div>
</div>
<div class="modal-footer float-right">
<button type="button" class="btn btn-sm btn-dark" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="createPostForm" id="createPostBtn" class="btn btn-sm btn-primary">Post</button>
<span class="loading-icon"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!-- end of create post modal -->
uj5u.com熱心網友回復：
我最終使用 javascript 的 FormData 解決了這個問題，方法是遍歷從輸入中獲取的檔案，然后將其附加到 FormData 的資料中。
let imageFiles = []
$("#CreatePostModal").on('change', (e) => {
$(postImagesPreviewContainer).html("")
if ($(e.target).attr("id") !== "id_images") return;
var filenames = "";
for (let i = 0; i < e.target.files.length; i ) {
filenames = (i > 0 ? ", " : "") e.target.files[i].name;
}
e.target.parentNode.querySelector('.custom-file-label').textContent = filenames;
//why is the this element returning the document and not the target itself
// check the length of the files to know what template to make
const files = e.target.files
const numberOfImages = files.length
let gridColumnSize;
if (numberOfImages > 5 | numberOfImages === 0) return;
var row = document.createElement("div")
row.setAttribute("class", "post-images")
for (file of files) {
const postImageChild = document.createElement("div");
postImageChild.setAttribute("class", "post-images__child_down")
const reader = new FileReader();
reader.onload = () => {
img = document.createElement("img")
img.setAttribute("src", reader.result)
img.onload = (e) => {
// here i will process on resizing the image
const canvas = document.createElement("canvas")
const max_width = 680
const scaleSize = max_width / e.target.width
canvas.width = max_width
canvas.height = e.target.height * scaleSize
var ctx = canvas.getContext("2d") // setting the context of the canvas
ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height)
const encodedSource = ctx.canvas.toDataURL(e.target, 'image/png', 1)
const processedImg = document.createElement("img") // create a processed image and return it.
processedImg.src = encodedSource
$(postImageChild).append(processedImg)
imageFiles.push(processedImg)
}
}
$(row).prepend(postImageChild)
$(postImagesPreviewContainer).append(row);
reader.readAsDataURL(file)
}
在獲取并調整所有影像的大小后，我進行了 ajax 呼叫，如下所示：
$("#CreatePostModal").on("click", (e) => {
if ($(e.target).attr("id") !== "createPostBtn") return;
e.preventDefault();
e.target.setAttribute("disabled", true);
$(e.target.nextElementSibling).fadeIn()
var form = $("#createPostForm")[0]
var data = new FormData(form); // getting the form data
console.log("this is the data", data)
for (var i = 0; i < imageFiles.length; i ) { // appending images to data
data.append('images', imageFiles[i]);
};
$.ajax({
url: $("#CreatePostModal").attr("data-url"),
data: data, //$("#CreatePostModal #createPostForm").serialize(),
method: "post",
processData: false,
cache: false,
contentType: false,
dataType: "json",
success: (data) => {
if (data.success) {
setTimeout(() => {
$(e.target).next().fadeOut();
ResetForm('createPostForm', 'PreviewImagesContainer')
$("#CreatePostModal").modal('hide')
$(e.target.nextElementSibling).fadeOut()
alertUser("Post", "has been created successfully!")// alerting the user
}, 1000)
} else {
$("#createPostForm").replaceWith(data.formErrors);
$("#PreviewImagesContainer").html("");
$("#CreatePostModal").find("form").attr("id", "createPostForm");
$(e.target.nextElementSibling).fadeOut()
};
$(e.target).prop("disabled", false);
},
error: (error) => {
console.log(error)
}
})
});
最后從request.FILESviews.py 檔案中獲取影像。
def post(self, request, *args, **kwargs):
form = PostForm(request.POST or None, request.FILES or None)
result = {}
files = request.FILES.getlist("images")
if is_ajax(request=request) and form.is_valid():
post_obj = form.save(commit=False)
post_obj.author = request.user
print(post_obj)
post_obj.save()
for file in files:
new_file = Files(image=file)
new_file.save()
post_obj.images.add(new_file)
post_obj.save()
result['success'] = True
return JsonResponse(result)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411071.html
標籤：