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の自分のために追記)
#!/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;
<!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>