通过jQuery/ajax帖子提交与ImageField一起提交表单(Django-Form)

im遇到一些问题，该表格（django-form）带有带有jQuery/ajax帖子的ImageField。我在image field上返回"需要"验证错误。

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

更新：我可以将ImageField设置为"必需" = 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 wich加载到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>

通过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)

P.S。最后一个说明 - 如前所述，这是一个已知的问题，MALSUP的解决方案使用了XMLHTTPREQUEST级别2。这只是一个较新的API，它为诸如文件上传，传输进度信息和发送表单数据的AJAX请求提供了更多功能。我的观点是，较旧的浏览器不支持它，因此请记住，如果您希望Legacy-Browser-users使用您的网站，则需要找到替代方案。

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

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

如果没有您的HTML代码，很难说出一个问题...理想情况下，您应该使用带有ID的表单，然后对该元素进行绑定到"提交"事件，以便输入密钥和触摸事件也通过相同的代码来处理。<<<<<<<<<<<<<<<<

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

另请参见：Ajax上传图像

相关内容

最新更新

热门标签：