Сильно не пинайте, я новичок в этом деле
Вообщем есть скрипт, загрузка изображений без перезагрузки страницы.
В примере был один инпут для одной картинки, я методом тыка продублировал поля и теперь у меня 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>
Помогите пожалуйста разобраться.
