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値にあわせないと値を受け取れません。

jquery $.ajax 動作確認用 perl v5.8 サンプル(PHPerの自分のために追記,Content-Type: multipart/form-data; を$.ajaxが送っていることも確認)

    #!/usr/local/bin/perl
    use File::Basename;
    use File::Copy;
    use CGI;
    
    #転送最大サイズを設定
    $CGI::POST_MAX = 1024 * 100000; #100MB
    
    $q = new CGI;
    
    
    #クライアントにヘッダを送信
    print "Content-type: text/html\n\n";
    binmode STDOUT;
    
    
    #ファイルの転送のチェック
    if (!defined($filename) and $error = $q->cgi_error){
        print 'file size error<br>';
        exit;
    }
    
    my $fp = $q->upload('file');
    
    #ファイルの存在の確認
    my $fname = basename($q->param('file'));
    if ($fname eq "./"){
        print 'file error<br>';
        exit;
    }
    
    copy ($fp, "./test/file/$fname");
    undef $q;
    
    print "ok upload!";
    
    exit;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <head>
        <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            function PageLoad(e) {
                var dropFrame = document.getElementById('DropFrame');
                dropFrame.addEventListener('dragover', onDragOver, false);
                dropFrame.addEventListener('drop', onDrop, false);
            }
            function onDragOver(e){
                e.preventDefault();
            }

            function onDrop(e) {
                e.stopPropagation();
                e.preventDefault();

                var files = e.dataTransfer.files;

                uploadFile(files[0]);
            }
            function uploadFile(file){
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    async: true,
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    url: 'uptest.cgi',
                    data: formData,
                    dataType :'html'
                }).done(function(html){
                    alert(html);
                });
            }
            $(function(){
                PageLoad();
            });
        </script>
    </head>
    <body>
        <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
    </body>
    </html>


<!-- end snippet -->