通过Jquery / Ajax Post与Imagefield提交表单（Django表单）吗？

鲁丰

2023-03-14

问题内容：

我在通过Jquery / ajax POST提交带有图像字段的表单（Django表单）时遇到一些问题。即时通讯在imagefield上返回“ Field
required”验证错误。

我一直尝试通过添加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>

问题答案：

通过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请求提供更多功能，例如文件上传，传输进度信息以及发送表单数据的功能。我的观点是，较旧的浏览器不支持它，因此请记住，如果要让旧浏览器用户使用您的网站，则需要找到替代方法。

通过Jquery / Ajax Post与Imagefield提交表单（Django表单）吗？

相关阅读

相关文章

相关问答

相关工具

相关文档