0

我在提交带有 Jquery/ajax POST 的图像字段的表单（Django 表单）时遇到了一些问题。我在图像字段上返回“必填字段”验证错误..

我一直在尝试附加 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>
4

2 回答 2

2

通过 jQuery ajax 上传文件存在一个已知问题。那里有大量 的解决方案 和插件 ，其中大多数使用iframe。但是，我认为malsup jQuery 表单插件提供了所有这些插件中最简单的，只需对您的代码稍作修改：

<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);

    }
  }

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

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

ps 最后一点 - 如前所述，这是一个已知问题，malsup 的解决方案使用了一种叫做XMLHttpRequest Level 2的东西。它只是一个更新的 API，它为 AJAX 请求提供更多功能，例如文件上传、传输进度信息和发送表单数据的能力。我的观点是，较旧的浏览器不支持它，因此请记住，如果您希望旧版浏览器用户使用您的网站，则需要找到替代方案。

于 2014-02-03T21:03:26.660 回答
0

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

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

没有您的 HTML 代码有点难以分辨...理想情况下，您应该使用带有 id 的表单，然后将该元素定位到绑定到“提交”事件，因此 Enter 键和触摸事件也由相同的代码处理。

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

另请参阅：Ajax 上传图片

于 2014-02-01T21:43:22.167 回答