Question

我在使用带有Jquery / ajax POST的图像字段提交表单（Django-form）时遇到了一些问题。我在图像场上找回“需要字段”验证错误..

我一直尝试使用附加formData的不同解决方案，但到目前为止还没有结果。我在正确的轨道上吗？请指出我正确的方向。谢谢！

更新：我可以将imagefield设置为required = false并且不会得到验证错误，但我希望该字段是必需的，而且表单似乎仍然没有提交图像..

基本功能如下：

$(function() {
    $('#imageupload').on('click', function() { 

        $('#dialog-modal').load('upload/ #myform');

        $('#dialog-modal').dialog({
              height: 550,
              width: 280,
              modal: true,

              buttons: {
                    Send: function() { 
                        var dialog = $(this), 
                            form = $('#myform'),
                            data = form.serialize();

                    $('.off').remove(); 

                    $.ajax({ 
                        url: 'upload/',
                        data: data,
                        type: 'post',

                        success: function(response) {
                            res = $.parseJSON(response);

                            if (res['status'] == 'OK') {
                                alert('Thank you!'); 
                                dialog.dialog('close'); 
                            }

                            else if (res['status'] == 'bad') {
                                alert('Please try again!');
                                delete res['status'] 
                                var errors = res;

                                $.each(errors, function(key, value) {

                                    var err = $('<span></span>', {
                                                    'class': 'off',
                                                    'text': value
                                            }),
                                        br = $('<br></br>', {
                                            'class': 'off',
                                        }),
                                        input = $('#id_'+key).parent(); 

                                    br.appendTo(input);

                                    err.appendTo(input);

                                    err.css('color', 'red').css('font-size', '10px');

                                });
                            }
                        }

                      });

                    }
                  }
            });


    });
})

表单看起来像这样，它在一个子html中加载到jquery对话框/模式框中：

    <form method="post" id='myform' enctype="multipart/form-data">
    {% csrf_token %}
    <h1> Upload </h1>
    <p><label for="name">Name:</label></p>
    <div class="fieldWrapper">
    {{ form.name }}
    </div>  
    <br>
    <p><label for="type">Type:</label></p> 
    <div class="fieldWrapper">                
    {{ form.type }}
    </div> 
    <br>
    <p><label for="description">Description:</label></p>  
    <div class="fieldWrapper">
    {{ form.description }}
    </div>  
    <br>  
    <p><label for="picture">Picture:</label></p> 
    <div class="fieldWrapper">                
    {{ form.picture }}
    </div> 
    </form>

Answer 1

通过jQuery ajax上传文件存在一个已知问题。有tons of solutions and plugins out there，其中大多数使用an iframe。但是，我认为malsup jQuery form plugin提供了最简单的一个，只需对您的代码稍作修改：

在<head>标记内添加：

<script src="http://malsup.github.com/jquery.form.js"></script>

更改Send函数中的代码，如下所示：

buttons: {
    Send: function() { 
        $('.off').remove();
        var dialog = $(this),
            options = {
                url: 'upload/',
                type: 'POST',
                success: function(response) {
                    // everything the same in here
                    }
                };

        $('#myform').ajaxSubmit(options);

    }
  }

当然，在服务器端，您需要确保文档中的follow the instructions有关如何将文件绑定到表单的信息。对于最基本的用法，通常归结为：

form = UploadForm(request.POST, request.FILES)

P.S。最后一点 - 如上所述，这是一个已知问题，malsup的解决方案使用了一个名为XMLHttpRequest Level 2的东西。它只是一个较新的API，它为AJAX请求提供了更多功能，如文件上传，传输进度信息和发送表单数据的能力。我的观点是older browsers don't support it，所以请记住，如果您希望遗留浏览器用户使用您的网站，您需要找到替代方案。

Answer 2

听起来您在图像字段上有必需的属性，并且您没有停止点击功能的默认行为。

$('#imageupload').on('click', function(e) { 
    e.preventDefault();

如果没有HTML代码，很难说清楚......理想情况下，您应该使用带有id的表单然后将该元素作为目标绑定到“submit”事件，这样Enter键和触摸事件也会由相同的代码处理。 / p>

$('#imageform').on('submit', function (e){ e.preventDefault() // other code here }

另请参阅：Ajax Upload image

通过Jquery / Ajax Post与Imagefield一起提交表单（django-form）？

2 个答案: