画像ファイルは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>
No.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>
No.1
- 回答日時:
こんばんは。
質問の意図と異なる回答でしたら、ご容赦ください。
基本的にクライアントで動く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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
-
ネストされたハッシュの値から...
-
jQuery 複数のfind()
-
【jQuery】hoverしたn秒後にイ...
-
IplImageをPictureBoxへ表示が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
画像をクリックすると別ウイン...
-
Microsoftのクリップギャラリー...
-
画像の座標位置取得
-
リンクをオーバーマウスで画像表示
-
スライドショーにフェード効果...
-
javascript 画像切り替え ラン...
-
クリックしたらJavaScriptで数...
-
JavaScriptで画像置換えてクリ...
-
インラインフレームでのクッキ...
-
<img>タグの alt= の値をキャプ...
-
JavaScriptクリックした画像を...
-
画像クリックでクリックした画...
-
【jQuery】複数の画像の読み込...
-
画像の自動切り替えができなく...
-
imgのsrcに値を設定するには
-
クリックとダブルクリック
-
jQueryで画像を重ねる
おすすめ情報

