input filesについて

Question

input type=fileについて、２つご質問させてください。

1.ユーザーからのアップロードファイルの個数を制限する事は可能でしょうか。maxlengthを指定してもファイルサイズの上限しか指定できないように思えます。documentをロード後にjsでカウントさせて、に以上ならinputをhideすることも考えましたが、スマートな方法ではないような気もしています。

2.取得したdataURLからサムネイルを表示させていますが、サムネイルのサイズを指定は可能でしょうか？

【追記】
ご指摘を頂きました、サムネイル表示につきまして、コードを記述させて頂きます。
サーバーサイドでというご意見もありますが、現状JSで処理できればと考えております（AJAXを使用すれば
サーバーサイド側で遷移せずにできるのかもしれませんが、まだajaxに明るくなく。。）
イメージとしてはアップロードしたファイルののオブジェクトのプロパティを変更してサムネイルにうまく出力すれば（縦横非を維持して）うまくすべて共通サイズにして表示することやサーバー側にも格納することができるのかと模索しております。

下記のように、e.target.resultでアップロードしたデータのdataURLを呼び出し、動的に生成したspanタグのsrc属性に格納することでサムネイルを表示する仕組みを検討しております。

 var readerObj = new FileReader();

  readerObj.onload = (function(theFile) {
  return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumbnail" src="', e.target.result,
           '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);

Comments

[m.ts10806]

1については意味がわかったので回答しました。2についてはもう少し具体的に要件を記述いただけますか？例など示してもらえれば助かります。

[pegy]

ご指摘ありがとうございます。2について加筆させて頂きました。

Answer 1

アップロード上限数があるならファイル名を固定すればいいでしょう。
指定されたどれかの名前にしかならないようにすれば
それ以上の数はアップできません。
もちろんinput fileを使用する限りサーバーサイドのプログラムが必要ですから
相応の振り分け処理を指定してあげる必要があります。

またサムネイルについてはこれもサーバーサイドのプログラムで比較的簡単に
任意の画素数で作成できます。

Comments

[pegy]

ご回答有難うございます。
正直もうしあげますと、ご指摘の方法を調べてみたのですが、
ファイル名の固定というアプローチを咀嚼することができませんでした。。
アップロードされたファイル名をアップロード時にrenameして、予め指定したファイル名以外
受け付けないようにするといった意味合いでしょうか？

[yambejp]

例えばユーザーAさんのユーザーidが12345で、最大ファイル数が5個であれば
Aさんは12345_1~5というファイル名でしかアップできないようにします。
Aさんが付けた任意の名前は1~5のどれかに振り分けられるようにするため
ユーザーインターフェースで番号を指定してアップロードをするのです

[pegy]

なるほど、了解をいたしました。
早速、コメントを頂き、有難うございました。

Answer 2

1.ユーザーからのアップロードファイルの個数を制限する事は可能でしょうか。

下記のようにjavascriptで選択ファイル数のカウントができるので、「超えたらアラート」で制限という形が可能です。

• アップロードするファイルの数を調べる

参考先ではボタンonclickでしていますが、input fileのonchangeイベントでも同じように対応ができるはず（onchangeで一時アップロードというのをしたことがあるので）

ただ、より安全にチェックするのであればPHPなどサーバー側の言語でのチェックは必須と思います。

Comments

[pegy]

コメント有難うございます。
シンプルな方法でとても良いかと感じました。サーバーサイド側でも
（当方PHPを使用していますが）しっかりとチェックをかけていきたいと思います。