JQuery的AJAX不是形式

我用jQuery以下AJAX功能发送文件：JQuery的AJAX不是形式

var formData = $('#FonykerEditForm').serialize();  
$.ajax ({ 
    type: 'POST', 
    url: '<?php echo $html->url('/fonykers/edit',true); ?>', 
    data: formData, 
    dataType: 'json', 
    success: function(response) { 
     message.html(response.msg); 
     message.fadeIn(); 
     if(!response.ok) { 
      message.removeClass('success'); 
      message.addClass('error'); 
     } else { 
      message.removeClass('error'); 
      message.addClass('success'); 
      username = $('#FonykerUsername').val(); 
      email = $('#FonykerEmail').val(); 
     } 

     $('#save-account-button').removeAttr('disabled'); 
     $('.input-text').removeClass('ok'); 
     $('.input-combo').removeClass('ok'); 
    }, 
    error: function (xhr, ajaxOptions, thrownError){ 
     alert(xhr.statusText); 
     alert(thrownError); 
     $('#save-account-button').removeAttr('disabled'); 
    } 
});

我遇到的问题是，在我的形式的文件类型字段没有得到连同其余提交表单的数据，如何将文件包含在ajax请求的数据中？

来源

2011-08-23 8vius

文件无法使用AJAX这种方式发送。使用其中的一个jquery插件来做上传。 – HyderA

如果您真的想通过ajax发送文件，请使用HTML5 –

您可以将表单的目标设置为隐藏的iFrame，然后监听隐藏的iframe的加载事件以查看它何时返回。然后，您可以从iframe正文获取内容作为响应。 –

就像我在上面的评论中说的，通过ajax发送文件并不简单。如果你想尝试它。我见过的一般方法是创建一个新的iframe，为其添加一个文件输入字段，选择您的文件并以编程方式提交。这样，iframe在后台进行提交。

看看这个插件是怎么做的：

~~https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L995~~

https://github.com/FineUploader/fine-uploader

来源

2011-08-23 17:13:54 HyderA

感谢兄弟，对于我想要做的事似乎过于复杂，所以我想我会停止对ajax的提交，交易是我希望用户能够预览他正在设置的图像， m不知道如何做到这一点，因为我使用的是CakePHP，而且我对于一般的web开发人员来说都是新鲜事物，所以我并没有真正掌握所有事情的结构 – 8vius

正确的方法是我的用户表中有一个字段，保存图像的路径，在我提交表单（非AJAX）以及表单信息的其余部分时，我的项目其余部分会自动保存，所以如果事先上传图像，我不确定之后如何获得路径。 – 8vius

您使用的插件通常会在文件上传时提供路径。如果不是，您可以修改服务器脚本以返回路径。 – HyderA

基本上是一个AJAX将在键/值对的形式提交数据。由于是二进制文件数据，您无法使用Ajax提交文件..您需要使用标准格式提交数据，而不是使用服务器提交数据，因为接受form/multipart

来源

2011-08-23 17:14:23

我试过这个链接，这对我很好。

http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/

实施例：

$('#my-form').submit(function(e) { 
    $.ajax({ 
    url: 'http://host.com/action/', 
    type: 'POST', 
    data: new FormData(this), 
    processData: false, 
    contentType: false 
    }); 
    e.preventDefault(); 
});

来源

2015-10-09 07:51:23 asHkER

工作很好，谢谢。我正在使用filestyle，因此我以.filestyle（'clear'）结尾，并在之后清除输入。 –

JQuery的AJAX不是形式

回答

相关问题