Eli’s Coming

JQuery - Multiple File Upload - を使ってみた

HTMLのForm要素でUIを作成する際にたまに「うぁ」と思うのが、

<input type=”file”>

だ。これは複数のファイルを1つのinput要素から送信することができないため要素をベタに並べるしかないので、全体がだらしない感じになってしまいがちだ。

今回は5つのファイルを同時に送信してやるのが目的だったのでさすがにinput要素を5つ並べるわけにもいかないと思い、JQueryプラグイン「Multiple File Upload」を使ってUIを作成することにした。

jQuery Multiple File Upload Plugin

導入は非常に簡単。JQuery(1.3.2でもおｋ)と同時にプラグインを読み込む。

<script src=”jquery-1.3.2.js” type=”text/javascript” language=”javascript”></script>
<script src=”jquery.MultiFile.js” type=”text/javascript” language=”javascript”></script>

そして、inputタグに”multi”などの所定のclassをつけてやるだけだ。

今回はmax5ファイルに制限したいのでmaxlength要素も追加した。

<input type=”file” class=”multi” maxlength=”5″>

これだけ。実際に送信する際にはformタグに enctype=multipart/form-data を加えるのを忘れないように。

[サンプル]

ここまでは非常に簡単でよかったんだが、ひとつ問題があった。

このプラグインの動きは、ファイルが追加されていくたびに新しい空のinput要素を追加していくのだけど、その際新たに追加される要素のname属性値が以前のものと一緒になっているのだ。

phpならinput要素のname属性を name=”temp[]” のように配列化しておけば同じ名前でもサーバー側で問題なく受け取ることができるのだけど、今回ColdFusionのcffileタグを使ってアップロードしようとしたら、cffileタグの必須属性としてformfieldが要求されていた。

このせいで同名のname属性値だと最初にきたデータのみ採用されてしまい、複数送信しても2番目以降のデータはcffileで拾うことができなくなっている。

なので、なんとかこのプラグインの中でinput要素の複製時に新しいnameを付与する方法を考えねばと思い色々と試行錯誤してみたところ、このプラグインをめぐる次のような資料を発見した。

What's the 'proper' way to submit multiple files for upload?

    Right, I’ve updated the plugin and added a new option: namePattern.

    Default value: $name
    $name = name attribute of original input element
    $g = group id (1, 2, 3…)
    $i = slave id (1, 2, 3…)

    If this option is not used, the plugin will use the same name for every
    newly created element (within the group) and will therefore submit an array.

    But this option can be used to create unique names for each element like
    this:
    <input type=”file” name=”stuff”/>
    $(’:file’).MultiFile({ namePattern: ‘$name_$i’ });
    …which would result in:
    <input type=”file” name=”stuff_1″/>    
    <input type=”file” name=”stuff_2″/>
    <input type=”file” name=”stuff_3″/>
    That way everyone is happy! (hopefully)

    Cheers,
    Diego A.

まぁ、私と同様の悩みを持った使用者が開発者にクレームをつけた結果、新しいオプションを追加しましたよということだ。それが、

    $(’:file’).MultiFile({ namePattern: ‘$name_$i’ });

この部分。例えばHTMLで

<input name="temp" type="file"> 

とコードされたものであれば、このスクリプトの実行後その名前はname="temp_0″という風に変わる。そしてファイルを追加していくたびに temp_1,temp_2,,,　という形で名前を一意のものにしていくことができる。

Permalink | コメント(0) | トラックバック(0) | 01:10