ファイルアップロード

ファイルアップロード特有の追加属性

<input type=”file”>にはrequired（必須）やdisabled（非活性）のような他のinput要素でも使える属性の他、ファイルアップロード特有の機能を持たせるための属性がある。特にファイル型を指定するaccept属性はアップロードできるファイル形式を限定するためによく使われるので覚えておく。また、select要素などでも使用できるmultiple属性を追加すれば、ファイルを複数選択させることも可能。

  • accept属性：ファイル型の指定。拡張子（.jpg、.png、.pdf、.docなど）、MINEタイプ文字列（application/mswordなど）、任意の音声・動画・画像ファイル（audio/, video/, image/*）※カンマで区切って複数の指定が可能
  • capture属性：端末カメラの利用。usr（端末の内側カメラ）、environment（端末の外側カメラ）※属性の値を省略した場合は外側カメラ

ファイルアップロードの見た目のカスタマイズ

<input type=”file”>そのものの見た目をCSSで変更することも不可能ではないが、「ファイルを選択」といったテキストを装飾することができなかったり、文字を変更したりすることもできないため、基本的には別の親要素で囲んで<input type=”file”>自体は隠すという実装方法になる。

<label class="fileUpload" tabindex="0">
　<input type="file" name="file" accept="image/*">画像ファイルを選択
</label>
input[type="file"] {  /* 非表示にする */
　opacity: 0;
　position: absolute;
}
.fileUpload {  /* ボタンを自作 */
　display: inline-block;
　padding: 10px 20px;
　background: #3D98B4;
　color: #fff;
　cursor: pointer;
}
.fileUpload:focus {  /* フォーカス時のスタイル（※tabindex=0でフォーカス可能になる） */
　outline: 2px solid #7ec3d8;
}

選択ファイル名の表示

ファイルを選択した際に、標準UIであれば選択したファイル名がブラウザ上に表示されるが、CSSだけでは選択されたファイル名を表示するところまでは実装できない。
この部分はjQueryで『選択ファイル名を表示する要素をあらかじめ用意しておき、ファイルが選択されたらその情報が格納されているプロパティからファイル名情報を取得して、ファイル名表示用の要素の中身を書き換える』という処理を加えることで実現している。

<label class="fileUpload" tabindex="0">
　<input type="file" name="file" accept="image/*">画像ファイルを選択
</label>
<p class="fileName">選択されていません</p>
$(function(){
　$('input[type="file"]').on('change', function () {  /* ファイルが選択されたら */
    /* この要素のfilesプロパティ情報を変数「file」に格納 */
    var file = $(this).prop('files')[0];
    /* fileNameというclassのついたpタグのテキストをファイル名情報に置き換える */
　  $('p.fileName').text(file.name);
　});
});
inserted by FC2 system