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?
