Сократить кол-во инпут до одного, динамически менять значения тега input
Сильно не пинайте, я новичок в этом деле :)
Вообщем есть скрипт, загрузка изображений без перезагрузки страницы. В примере был один инпут для одной картинки, я методом тыка продублировал поля и теперь у меня 5 инпутов для загрузки изображений. Всё работает, но как то неудобно иметь 5 инпутов, когда возможно всё сделать через один, я думаю нужно как то менять значения инпута после загрузки каждого изображения, например до загрузки <input id="photo1" а после загрузки <input id="photo2" и так далее. Наверняка есть и другие решения, но для этого я и здесь. Есть ещё и скрипт на php который принимает, обрабатывает и возвращает, но я думаю что его код здесь не нужен? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="ajaximage/scripts/jquery.min.js"></script> <script type="text/javascript" src="ajaximage/scripts/jquery.form.js"></script> <script type="text/javascript" > $(document).ready(function() { $('#photo1').live('change', function() { $("#preview1").html(''); $("#preview1").html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#imageform").ajaxForm({ target: '#preview1' }).submit(); }); }); $(document).ready(function() { $('#photo2').live('change', function() { $("#preview2").html(''); $("#preview2").html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#imageform").ajaxForm({ target: '#preview2' }).submit(); }); }); $(document).ready(function() { $('#photo3').live('change', function() { $("#preview3").html(''); $("#preview3").html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#imageform").ajaxForm({ target: '#preview3' }).submit(); }); }); $(document).ready(function() { $('#photo4').live('change', function() { $("#preview4").html(''); $("#preview4").html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#imageform").ajaxForm({ target: '#preview4' }).submit(); }); }); $(document).ready(function() { $('#photo5').live('change', function() { $("#preview5").html(''); $("#preview5").html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#imageform").ajaxForm({ target: '#preview5' }).submit(); }); }); </script> <title></title> </head> <body> <form id="imageform" action="ajaximage.php" method="post" enctype="multipart/form-data"> Фото-1:<input id="photo1" type="file" class="i-text" name="photo1" /> Фото-2:<input id="photo2" type="file" class="i-text" name="photo2" /> Фото-3:<input id="photo3" type="file" class="i-text" name="photo3" /> Фото-4:<input id="photo4" type="file" class="i-text" name="photo4" /> Фото-5:<input id="photo5" type="file" class="i-text" name="photo5" /> </form> <div id='preview1'></div> <div id='preview2'></div> <div id='preview3'></div> <div id='preview4'></div> <div id='preview5'></div> </body> </html> Помогите пожалуйста разобраться. |
Вы хотите отправлять 5 картинок разом или по очереди? Если разом, то лучше на лету создавать input с нужным id. Например, при нажатии кнопочки + ниже появляется еще одно поле с другим id.
PS <label> для форм никто не отменял :-? |
Цитата:
Я только учусь, и как сделать плюсик я не знаю :( Что мне даст label? |
Часовой пояс GMT +3, время: 18:45. |