質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2800閲覧

サムネイル表示のJSとの連動

hidepon

総合スコア206

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/11/21 05:00

jquery.uploadThumbs.jsという画像をアップロードする際にサムネイルを表示するスクリプトを利用したいのですが、

<table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="tbl_image" class="tbl_info"> <tbody> <tr> <th>画像1</th> <td><input type="file" name="images[]" multiple="multiple" size="20" /></td> </tr> <tr> <th>画像2</th> <td><input type="file" name="images[]" multiple="multiple" size="20" /></td> </tr> </tbody> </table> <input type="button" id="add_image_table" value="追加する" />&nbsp;<input type="button" id="del_image_table" value="削除する" /> の追加ボタンを押すと行が増えるスクリプトと連動ができません。 //ボタンを押すと行を追加する jQuery(function(){ jQuery('#add_image_table').click(function(){ var len = $("#tbl_image tbody").children().length; if(len > 10){ $("#add_image_table").attr("disabled","disabed"); } $('#tbl_image').append('<tr><th>画像' + (len + 1) + '</th><td><input type="file" name="images[]" multiple="multiple" size="20" /></td></tr>');
}); jQuery('#del_image_table').click(function(){ if (jQuery('tbody tr').length) { jQuery('tbody tr:last').remove(); } });

});
どのようにしたら良いでしょうか?
教えて下さい。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

最初に、input:fileを対象として、.uploadThumbs を呼び出し、プラグインの機能を有効化しますが、それは最初から存在する input:fileにしか適用されません

そのため、あとから追加した場合は同様に、その要素に対して.uploadThumbs を呼び出して有効化する必要があります


検証中に書き換えていったコード:

javascript

1var fileInputLimit = 10; 2var uploadThumbsOptions = { 3 position : 0, // 0:before, 1:after, 2:parent.prepend, 3:parent.append, 4 // any: arbitrarily jquery selector 5 imgbreak : true // append <br> after thumbnail images 6}; 7 8$(function(){ 9 $('#add_image_table').click(function(){ 10 var uploadButtonCount = fileInputElementCount(); 11 12 $('#tbl_image').append(newFileUploadCell(uploadButtonCount)); 13 14 $('#tbl_image tbody tr:last-child() > td input:file').uploadThumbs(uploadThumbsOptions); 15 16 imageTableAddButtonDisable(fileInputElementCount() > fileInputLimit); 17 }); 18 19 $('#del_image_table').click(function(){ 20 if ($('tbody tr').length > 1) { 21 $('tbody tr:last').remove(); 22 } 23 24 imageTableAddButtonDisable(fileInputElementCount() > fileInputLimit); 25 }); 26 27 $('input:file').uploadThumbs(uploadThumbsOptions); 28}); 29 30function newFileUploadCell(uploadButtonCount) { 31 return '<tr><th>画像' + uploadButtonCount + '</th><td><input type="file" name="images[]" multiple="multiple" size="20" /></td></tr>'; 32} 33 34function imageTableAddButtonDisable(bool) { 35 $('#add_image_table').attr('disabled', bool); 36} 37 38function fileInputElementCount() { 39 return $('#tbl_image tbody').children().length + 1; 40}

JavaScript は書き慣れず、突っ込みどころが多いとは思いますが、何か参考になれば幸いです

Link

投稿2015/11/21 08:19

編集2015/11/21 08:22
gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問