アップロード時に選択したファイルの情報を取得
サーバにアップロードする前に、ファイル名、サイズ、種類を取得
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>
サンプル
