前回同様、ファイルアップロードです。
前回はあらかじめ<iframe>タグを記述しておきましたが、今回はJavaScriptで動的に作成します。
ファイルを送信前にiframeを作成するので、onsubmitで関数を呼び出しています。
<form action="upload.cgi" target=upload onsubmit="senddata()" method="post" enctype="multipart/form-data">
<input type="file" name="fileupload">
<input type="submit">
</form>
<!-- ここにアップロードしたファイル情報を表示 -->
<div id="show"></div>
アップロード前にifarmeを作成する関数と、アップロードしたファイルの情報を表示する関数です。
基本的には前回と同じように、引数にファイル名とファイルサイズを受け取り、<div id="show"></div>に表示します
最後にiframeを削除します。
MSDN createElementのページによると、createElementのサポートはIE4では img, area, optionだけ、IE5でframeとiframeを除く全てとなっていますので
divオブジェクトを作成して、その中にdocument.write()でiframeを作成します。
<script type="text/javascript"><!--
function senddata(){
var dv=document.createElement('div');
dv.setAttribute('id', 'upcontainer');
dv.innerHTML='<iframe name="up"></iframe>';
document.body.appendChild(dv);
}
function GetFile(fname, fsize){
var div=document.getElementById("show");
if(!div){return;}
div.innerHTML ="ファイル名："+fname+"<br>";
div.innerHTML+="ファイルサイズ："+fsize+"バイト<br>";
}
div=document.getElementById("upcontainer");
document.body.remeveChild(div);
--></script>
ファイルを受信するCGIの作成です。（Perlで記述しています）
#!/usr/bin/perl
use CGI;
my $html=new CGI;
my $fsize=0;
my $fname = 'upload.dat';
my $fileupload = $html->param('fileupload');
print "Content-type: text/html\n\n";
if($fileupload){
my $FP=*FILEHANDLER;
open($FP,">$fname") or die("cannot open");
while(<$fileupload>) {
print $FP $_;
}
close $FP;
close $fileupload;
$fsize=-s $fname;
}
print <<_HTML_;
<html>
<head>
<title>fileupload</title>
<!-- ファイル情報を表示する関数の呼び出し -->
<script type="text/javascript"><!--
var fname="$fname";
var fsize="$fsize";
window.onload=function(){
window.parent.GetFile(fname,fsize);
}
--></script>
</head>
<!-- 本文は空白でもOK -->
<body><p>fileupload</p></body>
</html>
_HTML_
exit;
ファイルアップロードを試してみる
アップロード出来るのは拡張子 .jpg .png .gifだけです
複数の人が同時にアップロードすると、正常にアップロード出来なかったり、違うファイルが表示されることがあります
ファイルサイズの上限は100kbです。
document.createElement()で作成するdivエレメントは、実際に使用するときはスタイルでwidth=0px height=0px display=noneを指定して、見えないようにしてください。
アップロードしたファイルが表示されます