【JavaScript】ファイルサイズを自動取得して表示する
2024年07月16日
WEBサイト制作
- #HTML
- #css
- #JavaScript
- #tips
こんにちは!
上毛印刷WEB制作担当のソーヤです。
今回は地味に役立つWEBサイト運用に役立つTipsを紹介します!
普段WEBサイトにユーザーにダンロードしてもらうためのpdfやExcelをアップロードすることがあると思います。
その際、ファイルサイズを記載していますか?
pdfとかになると相当な容量になり、スマホユーザーの負担になってしまいかねません。
なので、ダウンロードファイルのサイズを記載することはユーザビリティの向上につながるでしょう。
ですが、面倒くさいですよね。
運用上、記載し忘れもありそうですし。
そこでこのコードが役立ちます!!
実装例
- 2024.07
- 2024.06
- 2024.05
- 2024.04
- 2024.03
- 2024.02
HTML例
<ul class="archive-list">
<li class="archive-item">
<div>2024.07</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202407.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202407.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
<li class="archive-item">
<div>2024.06</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202406.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202406.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
<li class="archive-item">
<div>2024.05</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202405.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202405.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
<li class="archive-item">
<div>2024.04</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202404.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202404.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
<li class="archive-item">
<div>2024.03</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202403.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202403.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
<li class="archive-item">
<div>2024.02</div>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202402.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
<a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202402.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
</li>
</ul>
CSS例
.archive-list{
display: flex;
list-style: none;
flex-wrap: wrap;
}
.archive-item{
width: calc(100% / 3);
margin: 0 0 10px;
}
.archive-item a{
color: #fff;
padding: 5px;
border-radius: 5px;
}
.archive-item a:nth-of-type(1){
background-color: #008014;
}
.archive-item a:nth-of-type(2){
background-color: #DF0201;
}
JavaScript例
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".js-fileSize").forEach(function(element) {
var fileLink = element.getAttribute('href');
element.setAttribute('data-filepath', fileLink);
processFileSize(element);
});
function processFileSize(element) {
var placeholder = "-";
var filePath = element.getAttribute('data-filepath');
if (!filePath) {
element.querySelector(".file_size").textContent = placeholder;
return;
}
var fileExtension = filePath.split('.').pop().toLowerCase();
if (fileExtension !== "pdf" && fileExtension !== "xlsx") {
element.querySelector(".file_size").textContent = placeholder;
return;
}
var xhr = new XMLHttpRequest();
xhr.open("HEAD", filePath, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var fileSize = xhr.getResponseHeader("Content-Length");
element.querySelector(".file_size").textContent = formatFileSize(fileSize);
} else {
element.querySelector(".file_size").textContent = placeholder;
}
}
};
xhr.send();
}
function formatFileSize(size) {
size = parseInt(size, 10);
if (size < 1024) {
return size + "B";
}
size = roundToDecimal(size / 1024);
if (size < 1024) {
return size + "KB";
}
size = roundToDecimal(size / 1024);
if (size < 1024) {
return size + "MB";
}
return roundToDecimal(size / 1024) + "GB";
}
function roundToDecimal(number) {
return Math.ceil(number * 10) / 10;
}
});
まとめ
今回もjQueryではなく、Vanilla.jsで実装してみました。
コピペしてガンガン使ってください!
この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。