FormData オブジェクトを使うと良いかと
>ファイルのアップロードについて、formの<input type = "file">を使ってのアップロードはできています。

サーバ側は動いているようなので、perlのコードはそのまま使えると思います、`url: 'f.php'` をperlのURLに変更してください。
(サンプルコードは、エラー処理とか複数ファイルのuploadは考慮していません。)

        function drop(e) {
            e.stopPropagation();
            e.preventDefault();
        
            var files = e.dataTransfer.files;
        
            fup(files[0]);
        }
        function fup(file) {
            var formData = new FormData();
            formData.append('file', file);
    
    //javascriptだけなら
    //        var up = new XMLHttpRequest();
    //        up.open("POST", "f.php", true);
    //        up.send(formData);
    
    //jqueryを使っているなら
            $.ajax({
                async: true,
                type: 'POST',
                contentType: false,
                processData: false,
                url: 'f.php',
                data: formData,
                dataType :'html'
            }).done(function(){});
        }

追記
jqueryを使うなら、
読み込み`<script src="http://code.jquery.com/jquery-1.12.4.js"></script>`
の追加と  `<body onload="PageLoad();">`  のonloadを削除して

    $(function(){
        PageLoad();
    });

に変更しましょう。

**追記2**、

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

は,動的に

`<input name='file' value=file>`
を作っています。

`$q->param(name)`のnameは、`<input name=`のnameで指定された名前をセットしなければならないので、formData.appendで指定したname値にあわせないと値を受け取れません。