アップロードするファイルの名前、サイズ、コンテンツタイプを取得する

Ads

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?