Javascript 使用Django表单通过AJAX上传文件

我一直在尝试创建一个允许通过Django表单上传文本和文件的系统。每当我尝试发布表单时，我似乎只能得到表单的消息部分。我一直在按照答案做参考，但我遇到了麻烦。首先，我的表单如下所示：

class MessageForm(forms.Form):
    message = forms.CharField(widget=forms.Textarea, required=False)
    file = forms.FileField(label="Attachment", required=False)

<form id="message-form" enctype="multipart/form-data">
    {{form.message}}<br>
    {{form.file}}

    <div class="sectio4-bottom">
        <div class="right-bottom">
            <input id="send-button" type="submit" value="Send"/>
        </div>
    </div>
</form>

$('html').on('submit', '#message-form', function(e){
    e.preventDefault();
    var data = new FormData($('#message-form').get(0));
    $.ajax({
        url: '#',
        type: 'POST',
        data: {
         'data': data,
         'csrfmiddlewaretoken': $('.csrftoken').text()
        }
    });
    return false;
})

它被呈现为HTML，如下所示：

class MessageForm(forms.Form):
    message = forms.CharField(widget=forms.Textarea, required=False)
    file = forms.FileField(label="Attachment", required=False)

<form id="message-form" enctype="multipart/form-data">
    {{form.message}}<br>
    {{form.file}}

    <div class="sectio4-bottom">
        <div class="right-bottom">
            <input id="send-button" type="submit" value="Send"/>
        </div>
    </div>
</form>

$('html').on('submit', '#message-form', function(e){
    e.preventDefault();
    var data = new FormData($('#message-form').get(0));
    $.ajax({
        url: '#',
        type: 'POST',
        data: {
         'data': data,
         'csrfmiddlewaretoken': $('.csrftoken').text()
        }
    });
    return false;
})

但是我感兴趣的部分是

var data=newformdata（$（'#messageform'）.get（0））。我从链接的问题中得到了这个，但是当它运行时，它给了我一个空对象。我还尝试将数据作为
'data'：$（“#消息形式”）.serialize（）
传递，但当它到达后端时，我查看了
请求。POST
我发现
数据中包含的唯一内容是我发送的消息<代码>请求。文件
为空

如何访问指定的文件？
尝试添加：

data.append('file',$("#file").files[0]); #Assume 'file' is id of your file field

之后


这里是我正在使用的一个示例函数

function saveVeichle() {
    $(".sk-wave").show();
    var dati = new FormData();
    dati.append('csrfmiddlewaretoken','{{csrf_token}}');
    dati.append('note',$("#note").val());
    dati.append('dip',$("#dip-0").val());
    dati.append('stato',$("#stato").val());


    $("input").each(function(id,obj){
        if (obj.type == 'checkbox') {
            dati.append(obj.name,obj.checked);
        } else {
            dati.append(obj.id,obj.value);
        }
    });

    dati.append('foto',$(".foto")[0].files[0]);
    dati.append('libretto',$(".libretto")[0].files[0]);
    $.ajax({
        url: "/mezzi/api/salva_mezzo/",
        type: "POST",
        data: dati,
        cache: false,
        contentType: false,
        processData: false,
    }).done(function(data) {
        if (data.res == 'ok') {
            window.location = '/mezzi/' + data.id + '/';
        } else {
            if (data.errors) {
                for (d in data.errors) {
                    noty_alert(d + ":" + data.errors[d]);
                }
            } else {
                noty_alert('Errore Salvataggio Mezzo!');
            }
            $(".sk-wave").hide();
        }

    });
}

尝试添加：

data.append('file',$("#file").files[0]); #Assume 'file' is id of your file field

之后


这里是我正在使用的一个示例函数

function saveVeichle() {
    $(".sk-wave").show();
    var dati = new FormData();
    dati.append('csrfmiddlewaretoken','{{csrf_token}}');
    dati.append('note',$("#note").val());
    dati.append('dip',$("#dip-0").val());
    dati.append('stato',$("#stato").val());


    $("input").each(function(id,obj){
        if (obj.type == 'checkbox') {
            dati.append(obj.name,obj.checked);
        } else {
            dati.append(obj.id,obj.value);
        }
    });

    dati.append('foto',$(".foto")[0].files[0]);
    dati.append('libretto',$(".libretto")[0].files[0]);
    $.ajax({
        url: "/mezzi/api/salva_mezzo/",
        type: "POST",
        data: dati,
        cache: false,
        contentType: false,
        processData: false,
    }).done(function(data) {
        if (data.res == 'ok') {
            window.location = '/mezzi/' + data.id + '/';
        } else {
            if (data.errors) {
                for (d in data.errors) {
                    noty_alert(d + ":" + data.errors[d]);
                }
            } else {
                noty_alert('Errore Salvataggio Mezzo!');
            }
            $(".sk-wave").hide();
        }

    });
}

@Nanor确保您的文件字段id为“file”。@Nanor确保您的文件字段id为“file”。