0

现在我有这个图片上传表单：

image_upload.html

<form id="image_upload_form" enctype="multipart/form-data" method="post" action="">
    <input id="id_image" type="file" name="image">
    <input type="submit" value="Upload">
</form>

以下代码是我处理 POST 请求的 Django forms.py 和 views.py：

表格.py

class ImageUploadForm(forms.Form):
    image = forms.ImageField()

视图.py

class MyView(DetailView):
    def post(self, request, *args, **kwargs):
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            print("FORM IS VALID!!!");

            # Do Something....

一旦我上传了一个图像文件并提交了表单，数据就会正确地发布到服务器，并且我得到响应“表单有效！！！”。



但是，我想添加拖放上传功能，所以我添加了以下代码：

image_upload.html

<form id="image_upload_form" enctype="multipart/form-data" method="post" action="">
    <input id="id_image" type="file" name="image">
    <input type="submit" value="Upload">
</form>

<div id="image_upload_drop_area">Drop Image Here</div>

上传.js

var drop_area = $("#image_upload_drop_area");
drop_area.bind('drop', drop);

function drop(event) {

    var file = event.originalEvent.dataTransfer.files [0];
    data = new FormData();
    data.append('image', file);

    $.ajax({
        url: location.href,
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            console.log("SENT SUCCESS");
        }
    });

这行不通。“数据”肯定会发送到服务器（我确实从服务器收到“SENT SUCCESS”消息），但不是作为“#image_upload_form”的输入。

换句话说，我没有得到“表格有效！！！” 消息，意味着它没有存储在“request.FILES”中。

我应该如何更改 javascript 代码，以便将图像文件作为 ("#imag_upload_form") 的表单数据发送？（即 id 为“#id_image”的输入）

谢谢

4

0 回答 0