javascript - JQuery AJAX not sending file with form - Stack Overflow

admin管理员组

文章数量:1344240

I have the following AJAX function with JQuery:

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-bo').removeClass('ok');
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(xhr.statusText);
        alert(thrownError);
        $('#save-account-button').removeAttr('disabled');
    }
});

The problem I'm having is that a type file field in my form is not getting submitted along with the rest of the data of the form, how can I include the file in the data of the ajax request?

I have the following AJAX function with JQuery:

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-bo').removeClass('ok');
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(xhr.statusText);
        alert(thrownError);
        $('#save-account-button').removeAttr('disabled');
    }
});

The problem I'm having is that a type file field in my form is not getting submitted along with the rest of the data of the form, how can I include the file in the data of the ajax request?

• javascript
• jquery
• ajax
• forms
• file

Share Improve this question Follow edited Aug 23, 2011 at 17:13 Nachshon Schwartz 15.8k2020 gold badges6363 silver badges9999 bronze badges asked Aug 23, 2011 at 17:06 8vius8vius 5,8361414 gold badges7676 silver badges137137 bronze badges 3

• 5 Files cannot be sent this way using ajax. Use one of the many jquery plugins out there to do uploads. – HyderA Commented Aug 23, 2011 at 17:08
• If you really want to send a file via ajax, use HTML5 – Tae-Sung Shin Commented Aug 23, 2011 at 17:13
• You could set the target of the form to a hidden iFrame, then listen for the load event of the hidden iframe to see when it returns. You can then get the content from the body of the iframe as the response. – Kevin B Commented Aug 23, 2011 at 17:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

I tried this link and this works fine for me.

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

Example:

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

Like I said in the ment above, sending files via ajax is not straightforward. If you wish to try it anyway. The normal approach I've seen is to create a new iframe, add a file input field to it, select your file and submit it programmatically. This way, the iframe does the submission in the background.

Take a look at how this plugin does it:

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

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

Basically an AJAX will submit data in the form of key/value pairs.. Since files are binary data, you can't submit files using Ajax.. You'll need to submit the data using a standard form submit instead and on the server since accept a form/multipart

本文标签： javascriptJQuery AJAX not sending file with formStack Overflow