アップロード時に選択したファイルの情報を取得

サーバにアップロードする前に、ファイル名、サイズ、種類を取得

HTML5 File APIを利用。

jQuery

$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; $('span').html('ファイル名:' + file.name + ' / サイズ:' + getFiseSize(file.size) + ' / 種類:' + file.type); }); }); /** * ファイルサイズの単位 * @param {int} file_size * @return {string} */ function getFiseSize(file_size) { var str; // 単位 var unit = ['byte', 'KB', 'MB', 'GB', 'TB']; for (var i = 0; i < unit.length; i++) { if (file_size < 1024 || i == unit.length - 1) { if (i == 0) { // カンマ付与 var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); str = integer + unit[ i ]; } else { // 小数点第2位は切り捨て file_size = Math.floor(file_size * 100) / 100; // 整数と小数に分割 var num = file_size.toString().split('.'); // カンマ付与 var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); if (num[1]) { file_size = integer + '.' + num[1]; } str = file_size + unit[ i ]; } break; } file_size = file_size / 1024; } return str; }

File APIはIE9以下では使用不可。
ファイル種類(MIMEタイプ)は種類によって取得できない場合あり。
ファイルサイズの単位はPHP版をJavaScript版に置き換え。

HTML

<form enctype="multipart/form-data" method="post"> <input type="file" name="userfile"> </form>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について