画像ファイルは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ランキング
-
javascriptによるランダム画像...
-
画像の座標位置取得
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
OpenCVの実行エラー
-
画像をドラッグ&ドロップで移...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
JavaScriptでシンプルなスライ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
画像と文字を同時に切り替えたい
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
時間によって表示される画像を...
おすすめ情報