一尘不染

通过Jquery / Ajax Post与Imagefield提交表单(Django表单)吗?

ajax

我在通过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>

阅读 142

收藏
2020-07-26

共1个答案

一尘不染

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

2020-07-26