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

Question

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

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

Answer 2

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

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

<罢工> https://github.com/valums/file-uploader/blob/master/client/fileuploader.js万罢工

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

Answer 3

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