Question

Django 1.10

你能帮我上传图片吗？请求通过ajax完成。该视图继承自一些mixins。它们只是添加动作或enctype的辅助。好吧，在呈现时呈现表单。我没有在这里展示mixins。

结果是表单无法通过验证。图像字段的错误消息：此字段是必填字段。

“选择文件”按钮附近出现“未选择文件”。

所有症状，如果证明没有'enctype =“multipart / form-data”'。看：在网络选项卡中，我看不到该文件已传输到服务器。如果我尝试序列化表单，则没有提到文件。

这似乎根本不是Django的问题：我无论如何都无法正确地将表单从客户端传递到服务器。问题似乎与html有关。

嗯，你能帮我一把吗？

ajax_form.html

<form id="object_form" action="{{ action }}" {% autoescape off %}{{ enctype }}{% endautoescape %} method="post">
    {% csrf_token %}
        <table>
            {{ form.as_table }}
        </table>

        <a id="submit" href="javascript:void(0)"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true">Save</span></a>


        <a id="cancel" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign" aria-hidden="true">Cancel</span></a>

</form>

views.py

class PictureCreate(AddEnctypeMixin, ActionCreateMixin, GetForeignKeyFromUrlMixin, CreateView):
    model = Picture
    form_class = PictureForm
    foreign_key_from_url = "sheet"

urls.py

urlpatterns = [
    url(r'^picture/', include('picture.urls', namespace='picture')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py

DEBUG = True

models.py

class Picture(models.Model):
    sheet = models.ForeignKey(Sheet, on_delete=models.PROTECT)
    title = models.CharField(max_length=100, unique=False, blank=True, null=True, verbose_name="Title")
    pic = models.ImageField(verbose_name="Picture", upload_to=upload__path)

检查元素

<form id="object_form" action="/sheet/3/picture_create/" enctype="multipart/form-data" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="Hs7aKX1nRs2pis357xQ8OFJgCyp2tyjF2MK62l2YxrtSBCnxKKg5RzUb7iWSNaNM">
        <table>
            <tbody><tr><th><label for="id_title">Title:</label></th><td><input id="id_title" maxlength="100" name="title" type="text"></td></tr>
<tr><th><label for="id_pic">Picture:</label></th><td><input id="id_pic" name="pic" type="file" required=""><input id="id_sheet" name="sheet" type="hidden" value="3"></td></tr>
        </tbody></table>

        <a id="submit" href="javascript:void(0)"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true">Save</span></a>


        <a id="cancel" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign" aria-hidden="true">Cancel</span></a>

</form>

在通过ajax发送之前在控制台中：

$("#object_form").serialize()
"csrfmiddlewaretoken=Hs7aKX1nRs2pis357xQ8OFJgCyp2tyjF2MK62l2YxrtSBCnxKKg5RzUb7iWSNaNM&title=&sheet=3"

网络标签

General

Request URL:http://localhost:8000/sheet/3/picture_create/
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8000

Response Headers

Content-Type:text/html; charset=utf-8
Date:Sat, 17 Sep 2016 16:17:16 GMT
Server:WSGIServer/0.2 CPython/3.5.2
Set-Cookie:csrftoken=sK40eJ5eIIcddMzOGOoiG8G41H9WminPN4HWw76PoHDGwWTgj1OfJ2RZwrGMGURW; expires=Sat, 16-Sep-2017 16:17:16 GMT; Max-Age=31449600; Path=/
Vary:Cookie
X-Frame-Options:SAMEORIGIN

Request Headers

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:108
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:sessionid=gxqv6cg1y8ozve2g6emciiujs9kc1e3c; csrftoken=sK40eJ5eIIcddMzOGOoiG8G41H9WminPN4HWw76PoHDGwWTgj1OfJ2RZwrGMGURW
Host:localhost:8000
Origin:http://localhost:8000
Pragma:no-cache
Referer:http://localhost:8000/sheet/3/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
X-Requested-With:XMLHttpRequest


Form Data

view URL encoded
csrfmiddlewaretoken:Hs7aKX1nRs2pis357xQ8OFJgCyp2tyjF2MK62l2YxrtSBCnxKKg5RzUb7iWSNaNM
title:adasfasdf
sheet:3

EcmaScript 6

_send_post_request(){
    let object_form = $("#object_form");
    this._button_manager.prevent_default(object_form);

    $.ajax({
        method: "post",
        data: object_form.serialize(),
        url: this._url,
        success: this._show_result.bind(this),
        error: general_fail
    });
}

Imagefield：无法上传图片

0 个答案: