通过Jquery / Ajax Post使用Imagefield提交表单（django-form）？

我在使用带有Jquery / ajax POST的图像字段提交表单（Django-form）时遇到了一些问题。 我在图像域上找回“需要字段”validation错误..

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

更新：我可以将imagefield设置为required = false并且不会得到validation错误，但我希望该字段是必需的，似乎表单仍然没有提交图像..

基本function如下所示：

$(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 = $('', { 'class': 'off', 'text': value }), br = $('

', { 'class': 'off', }), input = $('#id_'+key).parent(); br.appendTo(input); err.appendTo(input); err.css('color', 'red').css('font-size', '10px'); }); } } }); } } }); }); }) 

表单看起来像这样，它在一个子html中加载到jquery对话框/模式框中：

  
 {% csrf_token %} 
 Upload 
 
Name:
 
 {{ form.name }} 
 
 
Type:
 
 {{ form.type }} 
 
 
Description:
 
 {{ form.description }} 
 
 
Picture:
 
 {{ form.picture }} 
  

Answer 1

通过jQuery ajax上传文件存在一个已知问题。 有大量 的解决方案 和插件 ，其中大多数使用iframe 。 但是，我认为malsup jQuery表单插件提供了最简单的一个，只需稍微修改一下代码：

在标记内添加：

更改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请求提供了更多function，如文件上传，传输进度信息和发送表单数据的能力。 我的观点是， 旧的浏览器不支持它 ，所以请记住，如果您希望遗留浏览器用户使用您的网站，您需要找到替代方案。

Answer 2

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

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

没有你的HTML代码就很难说…你应该理想地使用一个带有id的表单然后将该元素作为目标绑定到’submit’事件，这样Enter键和触摸事件也由相同的代码处理。

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

另请参阅： Ajax上载图像