我在通过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>标签内添加以下内容:
<head>
<script src="http://malsup.github.com/jquery.form.js"></script>
更改Send函数中的代码,如下所示:
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请求提供更多功能,例如文件上传,传输进度信息以及发送表单数据的功能。我的观点是,较旧的浏览器不支持它,因此请记住,如果要让旧浏览器用户使用您的网站,则需要找到替代方法。