FormData загрузка изображений в JS

Question

Я могу успешно загрузить изображение на сервер с помощью следующей формы:

<form id="upload_form" action="/upload" enctype="multipart/form-data" method="post"> 
    <input name="image_url" type="file"> 
    <input id='submit' type="submit" value="Upload"> 
</form> 

Я пытаюсь сделать то же самое, что и выше, но программно с использованием HTML5 FormData() объект.

var bts_spritesheet; 

handleSpritesheetSelection = function(evt) { 
    var f, files, reader; 
    files = evt.target.files; 
    f = files[0]; 
    reader = new FileReader(); 
    reader.onload = (function(theFile) { 
    function(e) { 
     bts_spritesheet = e.target.result; 
    }; 
    })(f); 
    return reader.readAsDataURL(f); 
}; 
document.getElementById('upload_spritesheet').addEventListener('change', handleSpritesheetSelection, false); 

Следующая вызывается при нажатии пользователем на кнопку отправки:

var formData = new FormData(); 
formData.append('bts_spriteSheet', bts_spritesheet); 

var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/upload', true); 

xhr.onload = function(e) { 
    return console.log('yay its done'); 
}; 
xhr.send(formData); 

Мой HTML просто:

<input id="upload_spritesheet" type="file"> 

Я не включен и не говорил ни о чем Я делаю серверную сторону, потому что, как я уже сказал, загрузка файла с использованием обычной формы html5 выше хорошо работает, поэтому я знаю, что это должен быть мой JS-код.

Может ли кто-нибудь понять, почему код JS производит ошибку 500 сервомеханизма, но версия html-формы работает нормально?

Answer 1

Сравните органы запроса двух рабочих процессов. Live HTTP Headers в Firefox окажется полезным.