通过 Jquery/Ajax Post 提交带有 Imagefield 的表单（django-form）？答案

【问题标题】：Submit form (django-form) with Imagefield via Jquery/Ajax Post?通过 Jquery/Ajax Post 提交带有 Imagefield 的表单（django-form）？
【发布时间】：2014-02-01 21:19:52
【问题描述】：

我在提交带有 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>

【问题讨论】：

是的，似乎不支持通过 ajax 上传文件。有一些plugins 和examples 展示了如何解决这个限制。尝试了解如何使用它们。如果你没有找到解决办法，我找时间再想办法
好的。是的，我看到有人这么说，但也有很多人声称这是可能的（这有点令人困惑）。一种方法应该是称为 formData 的东西，我最近几天一直在尝试，但没有任何好的结果。 developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…不过插件我再试试看！
使用 malsup 插件，结果比我想象的要容易
该死的你是快人！那是哪个插件？
看答案=]

标签： jquery ajax django forms imagefield

【解决方案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)

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

【讨论】：

我正在努力让这个工作！还没有。但我很乐观！很多 } 和 };现在需要在正确的地方！我让你知道结果如何！感谢您的完整回答！
终于！！有用！现在我真的不在乎旧浏览器是否可以支持它。很高兴它可以正常工作！对这个人感激不尽！

【解决方案2】：

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

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

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

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

另请参阅：Ajax Upload image

【讨论】：

好的。谢谢你的回答。不要认为它是必需的，但即使是它，如果我选择了要上传的文件（？），它也应该传递该错误。反正这是我的想法。你应该发布一张图片，如果你这样做，该字段应该通过验证。我会尝试使用阻止默认值。