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 -->