oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

JavaScriptで複数ファイルのアップロード

修正版を掲載しました。本記事で紹介しているスクリプトには不具合があるので、修正版をご利用ください。

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>

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>

参照ボックスを増やすとファイルのアップロード攻撃を受ける危険性も増すので注意が必要ですね。

スポンサーサイト


2009.12.16 Wednesday | 12:37 | - | - | -