Result
選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。
jQuery
$("#foo").on('click', function () {
$("#bar").empty();
var fp = $("#hoge");
var lg = fp[0]
.files.length;
var items = fp[0].files;
var fragment = "";
if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; // ファイル名を取得
var fileSize = items[i].size; // ファイルサイズを取得
var fileType = items[i].type; // ファイルのコンテンツタイプを取得
// 表示
fragment += "<li>【ファイル名:" + fileName + " 】【サイズ:" + fileSize + " バイト】 【ファイルのタイプ:" + fileType + "】</li>";
}
$("#bar").append(fragment);
}
});
html
<input id="hoge" multiple type="file"/> <ul id="bar"></ul> <input id="foo" type="button" value="ファイルの詳細を表示"/>
via
Stack Overflow:How to display multiple files properties using jQuery?
