1

我有一个包含 ImageField 的模型的表单，我希望用户能够通过 AJAX 提交图像。

问题是 form.is_valide() 返回 False。当我不使用 AJAX 时，一切似乎都很好。我在类似问题上尝试了几个 SO 答案，但没有运气。

查看 （简化版）

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:

            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

HTML

<form id = "form" action="{% url 'photos:index' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

JS/jQuery

 $(document).ready(function(){

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
             // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
        return cookieValue;
    }
var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
    }

    $('#form').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/',
            type: 'POST',
            data: new FormData($(this)),
            cache:false,
            processData: false,
            contentType: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                alert("yo success");
                alert(data.message);
            }
        });
    });
});

非常感谢我能得到的任何帮助。谢谢

4

2 回答 2

1

当 Django 表单被传递数据时，它被认为是“绑定”的，调用 form.is_valid() 将对表单的绑定数据进行完全清理并设置实例属性 self._errors。从 self._errors 输出数据可能会为您提供向表单提交有效数据所需的信息。

我的建议是调试源代码......

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:
            # output form.errors here and figure out what fields aren't passing validation
            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})
于 2014-11-15T03:59:45.407 回答
0

解决办法是手动填充FormData对象

JS/jQuery

$('#form').submit(function(e){
        e.preventDefault();

        //fill FormData with form fields

        var data = new FormData($(this));
        data.append("photo", $("#id_photo")[0].files[0]);
        data.append("description",$("#id_description").val());

        $.ajax({
            url:'/',
            type: 'POST',
            data: data,
            cache:false,
            processData: false,
            contentType: false, 
            //part related to Django crsf token
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                var parseData = $.parseJSON(data);
                console.log(parseData.message);
            }
        });

    });
于 2014-11-17T01:48:29.700 回答