画像のアップロードフォームをjQueryで追加しようとしています。
初期状態は2枚分を用意して「追加する」ボタンを押すとフォームが追加される仕様です。
<table class="table" id="tbl_image"> <tbody> <tr> <th>画像1</th> <td><input type="file" name="images1" multiple="multiple" id="image1" /><img src="/images/noimage.gif" id="prev_img1" class="img-responsive" /></td><td><input type="text" name="caption[]" placeholder="画像の説明" /></td> </tr> <tr> <th>画像2</th> <td><input type="file" name="images2" multiple="multiple" id="image2" /><img src="/images/noimage.gif" id="prev_img2" class="img-responsive" /></td><td><input type="text" name="caption[]" placeholder="画像の説明" /></td> </tr> </tbody> </table> </div> <p><input type="button" id="add_image_table_insert" value="追加する" /> <input type="button" id="del_image_table_insert" value="削除する" /></p>
これに対して、
$('#add_image_table_insert').click(function(){ var len = $("#tbl_image tbody").children().length; if(len>8){ $("#add_image_table_insert").attr("disabled","disabed"); } data = '<tr><th>画像' + (len+1) + '</th><td><input type="file" name="images' + (len+1) + '" id="image' + (len+1) + '" /><img src="/images/noimage.gif" id="prev_img' + (len+1) + '" class="img-responsive" /><script>$("#image' + (len+1) + '").upimageview("#prev_img' + (len+1) + '");</script></td><td><input type="text" name="caption[]" placeholder="画像の説明" /></td></tr>'; $('#tbl_image').append(data); });
これをPOSTした際に
echo "<pre>" print_r($_FILES); echo "</pre>"
で追加された分が表示されません。
image2までしかPOSTされたこになっていません。
原因が分からず困っています。
詳しい方にご教授いただければ幸いです。
宜しくお願いいたします。
(追記)Jqueryのコードに画像プレビューに関する内容が含まれています。
回答1件
あなたの回答
tips
プレビュー