JQuery AJAX不发送带有表单的文件答案

【问题标题】：JQuery AJAX not sending file with formJQuery AJAX不发送带有表单的文件
【发布时间】：2011-08-23 17:06:00
【问题描述】：

我有以下带有 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 请求的数据中？

【问题讨论】：

无法使用 ajax 以这种方式发送文件。使用众多 jquery 插件之一进行上传。
如果你真的想通过 ajax 发送文件，请使用 HTML5
您可以将表单的目标设置为隐藏的 iframe，然后监听隐藏 iframe 的加载事件以查看它何时返回。然后，您可以从 iframe 的正文中获取内容作为响应。

标签： javascript jquery ajax forms file

【解决方案1】：

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

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();
} );

【讨论】：

对我来说工作得很好，谢谢。我正在使用文件样式，所以我以 .filestyle('clear') 结束，之后它会清除输入。

【解决方案2】：

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

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

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

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

【讨论】：

谢谢老兄，我想做的事情似乎过于复杂，所以我想我会停止提交 ajax，交易是我希望用户预览他正在设置的图像，我不知道该怎么做，因为我使用的是 CakePHP，而且我对 web 开发人员一般来说是新手，所以我并没有真正掌握一切的结构
正确我的用户表中有一个字段来保存图像的路径，而在我的项目的其余部分中，当我提交表单（非 AJAX）以及表单信息的其余部分，所以如果我事先上传图片，我不确定之后如何获取它的路径。
您使用的插件通常会在文件上传时提供文件的路径。如果没有，您可以修改服务器脚本以返回路径。
@gAMBOOKa 你的链接 id 现在失效了
链接已失效，链接万岁。看看github.com/valums/file-uploader/blob/master/README.md

【解决方案3】：

基本上，AJAX 将以键/值对的形式提交数据。由于文件是二进制数据，因此您不能使用 Ajax 提交文件。您需要使用标准表单提交来提交数据，并且在服务器上，因为接受 form/multipart

【讨论】：