Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2012, 14:41
Новичок на форуме
Отправить личное сообщение для Dikkiy Посмотреть профиль Найти все сообщения от Dikkiy
 
Регистрация: 24.04.2012
Сообщений: 4

Сократить кол-во инпут до одного, динамически менять значения тега 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>


Помогите пожалуйста разобраться.
Ответить с цитированием
  #2 (permalink)  
Старый 01.05.2012, 00:23
Интересующийся
Отправить личное сообщение для maxmaster Посмотреть профиль Найти все сообщения от maxmaster
 
Регистрация: 25.02.2012
Сообщений: 10

Вы хотите отправлять 5 картинок разом или по очереди? Если разом, то лучше на лету создавать input с нужным id. Например, при нажатии кнопочки + ниже появляется еще одно поле с другим id.

PS <label> для форм никто не отменял
Ответить с цитированием
  #3 (permalink)  
Старый 01.05.2012, 02:33
Новичок на форуме
Отправить личное сообщение для Dikkiy Посмотреть профиль Найти все сообщения от Dikkiy
 
Регистрация: 24.04.2012
Сообщений: 4

Сообщение от maxmaster Посмотреть сообщение
Вы хотите отправлять 5 картинок разом или по очереди? Если разом, то лучше на лету создавать input с нужным id. Например, при нажатии кнопочки + ниже появляется еще одно поле с другим id.

PS <label> для форм никто не отменял
Отправлять по очереди.
Я только учусь, и как сделать плюсик я не знаю
Что мне даст label?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск