Ajaxで製品の画像をアップロードする機能を実装したい

前提・実現したいこと

製品ごとの画像をuploadできる機能のクライアント側を実装しております。
サーバー仕様書によると、
http://hoge.com/api/products?id=hoge
にPOSTすることでidがhogeの製品の画像をuploadすることができるようなのですが、
お恥ずかしながら初心者のため、uploadすることができずにおります。

サーバー側は
・クロスオリジンの設定は対応済み
・マルチパートのデータには対応していません

発生している問題・エラーメッセージ

500 Internal Server Error

該当のソースコード

Javascript
1// uploadButtonをクリックで、フォームで選択された画像ファイルをuploadImgに格納し、
2// uploadImgを引数としてpostImgを起動
3document.getElementById("uploadButton").addEventListener(
4                    'click',
5                    function() {
6                        var elementFile = document.getElementById("upload");
7                        var uploadImg = elementFile.files[0];
8                        postImg(uploadImg);
9                    }, false);
10
11// 上記のクリックで起動されるpostImgについての記述となります
12// content-typeを指定して、apiのURLにuploadImgをPOSTします。
13 var postImg = function(uploadImg) {
14                var contentType = uploadImg.type
15                var xhr = new XMLHttpRequest();
16                xhr.open('POST', 'http://hoge.com/api/products?id=hoge', true);
17                xhr.setRequestHeader('Content-Type', contentType);
18                xhr.onload = function(e) {
19                    if (this.readyState == 4) {
20                        maeesage.innerHTML = "アップロードが完了しました。";
21                    }
22                };
23                xhr.send(uploadImg);
24            };

試したこと

個人的には
xhr.openの箇所でURLにパラメーターも指定してしまっているところが間違っているのではないかと考えております。
書籍では、GETと異なり、POSTの場合は xhr.send内でパラメーターを指定すると書いてありました。
しかし、そうすると、現在sendで指定しているuploadImgを今度はどこに書けば良いのかわからず・・・迷っております。

上級者のみなさまに、手がかりをご教示頂けたら、大変ありがたいです。
こちらの理解不足で、足りない情報などございましたらお気軽にお申し付けくださいませ。