YouTube | Facebook | X(Twitter) | RSS

リンクのファイル情報を取得して拡張子とサイズを表示する方法

2014/4/4 (金)

Web ページ内のファイル リンクに対して自動的に拡張子やファイル サイズを表示させる方法です。

自分のサーバにファイルが存在する場合

JavaScript のみで実現できます。

jquery.file.size-extension.js

別サーバにファイルが存在する場合

他のサーバにリンクされているファイルを取得したい場合、クロスドメイン云々の関係で JavaScript からは直接ファイル情報にアクセスできません。この回避方法として、ファイルが設置されているサーバにコールバック用のサーバ コードを仕込み、それを JSON 経由でやりとりする方法をとります。

1.ファイルが設置されているサーバ下のコードを含むファイルを設置します。PHP か Java かを用意しました。コード内の root 変数に URLのルートにあたるサーバのローカル ディレクトリ パスを設定してください(例:/usr/local/httpd/)。原因は追及しませんでしたが JSP のコードだとサーバ エラーを返す場合があったので自分は PHP 版を採用しました。

getFileSize.php

getFileSize.jsp

2.呼び出し側に以下の JavaScript コードを設置します。コード内の request_url 変数に getFileSize.php や getFileSize.jsp のパスを指定します。

3.HTMLからjquery.js と jquery.file.size-extension.js を参照させます。

呼び出し方法

以下の HTML で実行できます。jQuery の呼び出しは必須です。

<script type="text/javascript" src="//code.jquery.com/jquery-1.5.min.js">
</script><script type="text/javascript" src="./jquery.file.size-extension.js"></script><!--自分のサーバ内のファイル情報を取得する場合-->
<script type="text/javascript" src="./jquery.file.size-extension-json.js.js"></script><!--別サーバ内のファイル情報を取得する場合-->

参考

  • この記事を書いた人

羽田 康祐

伊達と酔狂のGISエンジニア。GIS上級技術者、Esri認定インストラクター、CompTIA CTT+ Classroom Trainer、潜水士、PADIダイブマスター、四アマ。WordPress は 2.1 からのユーザーで歴だけは長い。 代表著書『"地図リテラシー入門―地図の正しい読み方・描き方がわかる』 GIS を使った自己紹介はこちら。ESRIジャパン(株)所属、元青山学院大学非常勤講師を兼務。日本地図学会第31期常任委員。発言は個人の見解です。

-プログラミング, Web