うーん・・・

JavaScripptでアルバム作り

解決済

質問者：FaberSid
質問日時：2017/05/14 02:11
回答数：2件

画像ファイルは1.jpgからの連番で保存さえており、
1.jpgから順に表示するプログラムを作っています。
ファイルが存在してもfilesizeとsizeプロパティーはundefinedです。
画像ファイルの数はよく変わるのでfor I=1 to 100のようにならないように作らないといけません。
なのでこのプログラムを手直ししてほしいです。
<!DOCTYPE html>
<html><head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>TeraPad</TITLE>
<script type="text/javascript"></script>
</head>
<body onload="fileCheck();">
Hello.
<div id="book"></div>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： taigoito
回答日時：2017/05/19 23:42

こんばんは。

質問の意図と異なる回答でしたら、ご容赦ください。

基本的にクライアントで動くJSで、ファイル数などを取得するのは無理なので、
画像の枚数を引数にとって、連番にした画像を読み込む関数を作り、
それをアルバム（？）ごとに、それぞれのページで実行させるのがシンプルだと思います。

すみませんが、ちょっと僕の読解力が足らず、現状のコードを理解しかねますので、
手直しというより、完全に書き換えてしまいます。
それから、画像はフォルダにまとめず、htmlと同じ階層に全て置いてあるのでしょうか。
そのような前提でしたら、下記のコードで動くと思います。

function appendPages(pageCount) {
var book = document.getElementById("book");
var dir = ""; //画像フォルダのパス
for (var i = 0; i < pageCount; i++) {
var page = new Image();
page.src = dir + i + ".jpg";
book.appendChild(page);
}
}

appendPages(100) //ページごとに設定

画像数をきちんと取得してやりたいなら、PHPでやるべきのような気がしますね。
どうしてもJSでそこまでやりたいなら、IE限定ですが↓↓

https://oshiete.goo.ne.jp/qa/7180158.html

- 1
- 件

通報する

No.2ベストアンサー

回答者： Ogre7077
回答日時：2017/05/24 13:20

画像ファイルを 1.jpg から順に連番で在るだけ表示するプログラム例

画像を1件ずつ読み取るので、少々遅くなります。

<script>
function loader(_){
_ ; var sx = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; document.getElementById("book").appendChild(img);
_ ; _ ; fx(parseInt(img.dataset.nextNo));
_ ; };
_ ; var ex = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; console.log('nothing: ' + img.src);
_ ; };
_ ; var fx = function(no){
_ ; _ ; var img = new Image();
_ ; _ ; img.dataset.nextNo = no + 1;
_ ; _ ; img.addEventListener('load', sx, false);
_ ; _ ; img.addEventListener('error', ex, false);
_ ; _ ; img.alt = '画像(ページ@)'.replace(/@/, no);
_ ; _ ; img.src = no + '.jpg'; // start loading
_ ; };
_ ; fx(1);
}
</script>
<body onload="loader()">
<div id="book"></div>