javascript - why is FormData erroring - Stack Overflow

admin管理员组

文章数量:1308521

I am trying to upload an image using ajax and FormData

my html looks like:

<form id="profile-photo-form">
    <input type="file" id="profile-photo-choose" name="photo_path" accept="image/*">
</form>

and js function called on change of the file selector:

var form_data = new FormData($('#profile-photo-form')[0]);

$.ajax({
    type: 'POST',
    url: api_url,
    data:form_data,
    headers:{
        'X-CVL-Auth': cookie
    },
    success: function(result){

but I get a javascript error of:

TypeError: Can only call DOMFormData.append on instances of DOMFormData

this is for a html app loaded on ios (phonegap)

I am trying to upload an image using ajax and FormData

my html looks like:

<form id="profile-photo-form">
    <input type="file" id="profile-photo-choose" name="photo_path" accept="image/*">
</form>

and js function called on change of the file selector:

var form_data = new FormData($('#profile-photo-form')[0]);

$.ajax({
    type: 'POST',
    url: api_url,
    data:form_data,
    headers:{
        'X-CVL-Auth': cookie
    },
    success: function(result){

but I get a javascript error of:

TypeError: Can only call DOMFormData.append on instances of DOMFormData

this is for a html app loaded on ios (phonegap)

• javascript
• jquery
• ios
• forms

Share Improve this question Follow asked Jan 6, 2015 at 13:51 rpsep2rpsep2 3,1211010 gold badges4141 silver badges5252 bronze badges 2

• Just use data: $('#profile-photo-form').serialize(). You do not need to use FormData as serialize does all the work for you. – iCollect.it Ltd Commented Jan 6, 2015 at 13:54
• The error refers to a call to .append on a formdata object but your code does not show that. – marekful Commented Jan 6, 2015 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Other ments pointed out that you can just use .serialize(), however, this won't work on any field that contains an image.

Using this same method, simple add another setting processData: false to stop the JS from trying to look at your data, and instead just submit everything it gets back as a hash.

I haven't tested every case, but this SHOULD submit the data in the exact same format as if you had submitted without AJAX.

var form_data = new FormData($('#profile-photo-form')[0]);

$.ajax({
    type: 'POST',
    url: api_url,
    data:form_data,
    processData: false, // add this here
    headers:{
        'X-CVL-Auth': cookie
    },
    success: function(result){

本文标签： javascriptwhy is FormData erroringStack Overflow