スポンサーサイト
一定期間更新がないため広告を表示しています
2009.12.16 Wednesday | | - | - | -
※修正版を掲載しました。本記事で紹介しているスクリプトには不具合があるので、修正版をご利用ください。
MOONGIFTさんが「複数ファイルを＊華麗に＊アップロードするFlash」を紹介されています。
ファイルの参照ボックスは決められた数しか表示できないので、複数の参照ボックスを利用できるというのは、ユーザビリティの面で高いメリットを期待できますね。
oitakeも昔、ユーザーの任意で参照ボックスを複製できるJavaScriptを組んだことがあるので、今回はこれをご紹介します。
「もうひとつ」ボタンを押すと参照ボックスが複製されます。
「アップロードする」ボタンを押せば、送信先のPHPがアップロードファイルを列挙するので、確認してみてください（手抜きですけど…）。
ソースコードは続きからどうぞ。なお、PHPでは「$_FILES」変数からアップロードファイルの情報を取得できます。配列になっているので、その点考慮してください。
MOONGIFTさんが「複数ファイルを＊華麗に＊アップロードするFlash」を紹介されています。
ファイルの参照ボックスは決められた数しか表示できないので、複数の参照ボックスを利用できるというのは、ユーザビリティの面で高いメリットを期待できますね。
oitakeも昔、ユーザーの任意で参照ボックスを複製できるJavaScriptを組んだことがあるので、今回はこれをご紹介します。
「もうひとつ」ボタンを押すと参照ボックスが複製されます。
「アップロードする」ボタンを押せば、送信先のPHPがアップロードファイルを列挙するので、確認してみてください（手抜きですけど…）。
ソースコードは続きからどうぞ。なお、PHPでは「$_FILES」変数からアップロードファイルの情報を取得できます。配列になっているので、その点考慮してください。
JavaScriptのソースコードです。
念のため、10個以上複製できないように制限をかけています。
<script type="text/javascript">
var downloads=new Object();
downloads.no=1;
downloads.add=function()
{
if(this.no>=10)
{
return;
}
var src=document.getElementById('downloads_src');
var cln=src.cloneNode(true);
cln.id="downloads_cln_"+this.no;
var dst=document.getElementById('downloads_dst');
dst.appendChild(cln);
this.no++;
};
</script>
var downloads=new Object();
downloads.no=1;
downloads.add=function()
{
if(this.no>=10)
{
return;
}
var src=document.getElementById('downloads_src');
var cln=src.cloneNode(true);
cln.id="downloads_cln_"+this.no;
var dst=document.getElementById('downloads_dst');
dst.appendChild(cln);
this.no++;
};
</script>
JavaScriptは下の.jsファイルを使ってもOKです。
<script src="http://oitake.chicappa.jp/js/downloads.js" type="text/javascript"></script>
HTMLはこんな感じ。
<form action="http://oitake.chicappa.jp/formtester/index.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<input type="button" value="もうひとつ" onclick="downloads.add()" />
<div id="downloads_src"><input type="file" name="files[]" value="" /></div>
<div id="downloads_dst"></div>
<input type="submit" value="アップロードする" />
</form>
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<input type="button" value="もうひとつ" onclick="downloads.add()" />
<div id="downloads_src"><input type="file" name="files[]" value="" /></div>
<div id="downloads_dst"></div>
<input type="submit" value="アップロードする" />
</form>
参照ボックスを増やすとファイルのアップロード攻撃を受ける危険性も増すので注意が必要ですね。