画像ファイルは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"><!--
function fileCheck(){
var fileNo = 1;
var file = fileNo+".jpg";
while(file.size != -1){ // ファイルサイズを取得
document.getElementById("book").innerHTML = document.getElementById("book").innerHTML + "<img border=0 src="+file+" width=300 height=300 alt=漫画(ページ"+fileNo+")>"+fileNo;
//alert(file.size+" "+file.filesize);
if (fileNo >= 100){
alert("画像数が多すぎます。");
break;
}

fileNo=fileNo+1;
file = fileNo+".jpg";
}
}

// --></script>
</head>
<body onload="fileCheck();">
Hello.
<div id="book"></div>
</body>

A 回答 (2件)

画像ファイルを 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>
    • good
    • 0

こんばんは。


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

基本的にクライアントで動く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
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qタイトルについて

こんにちは。よろしくお願いします。

HPビルダーで商用のHPを作成しています。
検索ロボットにひっかかるように、タイトルやキーワードをタグ入力?していますが、うまくいきません。

<TITLE>○○のお店</TITLE>
↑このタグを入れると、画面最上に「○○のお店」と表示されるようになりますよね?
それが、ビルダーのページ編集中には正常に表示されるのですが、いざアップロードすると表示されません。ソースを見てみても、ビルダーで入力したはずのタイトルやキーワードがみあたりません。
ただHPのアドレスが表示されているだけで・・・
何故なんでしょうか・・・

あまりPCに詳しくないので説明が下手でごめんなさい。
どなたか教えて下さい!!

Aベストアンサー

ソース拝見しました。
ブラウザの一番上、ホームページタイトルにあたるところに表示されないと言うご質問ですよね?

えと、表示されました。
IE6、Firefox、ネスケ7、Opera全て問題なかったです。
どのブラウザで、表示されませんでしたか?
できれば、全部見たいところです。差し支えなければ、アップロード済みのURLを教えてください。

#これは質問とは関係ありませんが、ソースに同じことが何度も書かれていて、無意味な箇所があります。
できる限り整斉しましょう。
⇒4行目の文字コードの箇所、19行目と23行目にも同じ内容が。
21行目と24行目も同じですし、20行目と25行目も…。

QjQuery要素の絞り込み + タグの追加 + ソート機能

jQuery要素の絞り込みボタンを<select></select>タグにしたいです。

下記のindex.html の種類のボタンに、select button.html の機能を追加したいですが

どなたかわかる方がいましたら教えて下さい

http://xfs.jp/tdevx

Aベストアンサー

移植すれば良いだけでは?

JavaScript:
$(function() {
$("#selects").change(function() {
var tags = $("#selects option:selected").val();
$("#sortwrapper").children().hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .tri").show();
} else {
$("#sortwrapper").children().hide();
}
});
});

HTML:
<select id="selects">
<option value="all">全て</option>
<option value="dogs">イヌ</option>
<option value="cats">ネコ</option>
<option value="birds">トリ</option>
</select>

プルダウンの中にボタンを入れたい訳ではありませんよね

移植すれば良いだけでは?

JavaScript:
$(function() {
$("#selects").change(function() {
var tags = $("#selects option:selected").val();
$("#sortwrapper").children().hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .tri").show();
} else {
$("#sortwrapper").children().hide();
}
});
});

HTML:
<select id="selects">
<option value="all">全て</option>
<optio...続きを読む

Q

数十の<a>タグがあるHTMLファイルの中で、
<div id="blank">で囲まれた<a>タグ群のみをすべてtarget="_blank"にしたいと考えています。
該当する<a>タグすべてにtarget="_blank"を書くと、HTMLファイルの容量が大きくなるので、CSSのIDとJavaScriptを組み合わせて、実現できないものでしょうか。

Aベストアンサー

<base target="_blank">
<div id="blank">
 <!-- -->
</div>
<base target="_self">

Q

▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか?

<div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。

また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか?

何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。

Aベストアンサー

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。
つまり、
id="soldout"の時に
var soldout;という風にはしない方が良いです。
同じでなければ、cartFormでもなんでもかまいません。
あと、scriptは、
<!--
(スクリプトの中身)
//-->
のように
<!--
//-->
で囲むようにします。

getElementById
は、ブラウザやのブラウザのバージョンによっては使えないことがあります。
その場合は、使えるかどうかを調べる必要があります。

<script type="text/javascript">
<!--
function stockStatus (num){
var f=document.getElementById("soldout");

if(f!=null){
for (var i =0; i<=f.length -1 ;i++){
f.elements[i].disabled=num;
}
}
}
//-->
</script>

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として...続きを読む


人気Q&Aランキング

おすすめ情報