画面を移動せずにファイルをアップロードし、そのページにアップロードしたファイルの情報を表示します。
Ajaxライクなファイルアップロードになりますが、実際にはAjaxを使いません。
iframeを使うため、必ず「非同期」になりますので、同期型アップロード（送信後、送信が完了するまで次の動作をできなくする）を使う場合は、Ajaxに対応したライブラリなどを使ってください。
Ajaxを使っても、基本的な送信部分は同じになると思います。
<form action="upload.cgi" target="upload" method="post" enctype="multipart/form-data">
<input type="file" name="fileupload">
<input type="submit">
</form>
<!-- ここにアップロードしたファイル情報を表示 -->
<div id="show"></div>
<!-- ファイル情報が返ってくるiframeを作成。表示上は見えないようにスタイル指定 -->
<iframe src="about:blank" name="upload" style="width:0px; height:0px; display:none;"></iframe>
ファイルを送信後、アップロードしたファイルの情報を表示する関数です。
引数にファイル名とファイルサイズを受け取り、<div id="show"></div>に表示します
（このスクリプトは<head></head>の中に記述してください）
<script type="text/javascript"><!--
function GetFile(fname, fsize){
var div=document.getElementById("show");
if(!div){return;}
div.innerHTML ="ファイル名："+fname+"<br>";
div.innerHTML+="ファイルサイズ："+fsize+"バイト<br>";
}
--></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です。
アップロードしたファイルが表示されます
ファイルアップロードサンプル公開サイト
Upload progress bar Demo
Railsというwikiライクなシステムで、ファイルアップロードとプログレスバーを表示するサンプルです。
内部でprototype.jsを使用しています。