Добавленная JS форма не хочет работать
 

Всем доброго дня.
Средствами php+html на страницу добавляю форму:

<form name="upload_form">
		<div id="imageloadbutton">
			<input id="photoimg" type="file" name="photos[]" multiple="true"/>
		</div>	
		<div id="imageloadstatus" style="display:none">
			<img src="include/upload_photo/loader.gif" alt="Загрузка ..."/><span>Идет загрузка...</span>
		</div>
</form>

Данная форма отлично работает. (обращаю внимание кнопки submit нет). По нажатию, открывается окно, выбираю стопку файлов , нажимаю ок, и все отправляется на сервер.

Решил малость переделать страницу. Теперь добавляю форму кодом js:

kod += '<form name="upload_form">';
    kod += '<div id="imageloadbutton">';
    kod += '<input id="photoimg" type="file" name="photos[]" multiple="true"/>';
    kod += '</div>	';
    kod += '<div id="imageloadstatus" style="display:none">';
    kod += '<img src="include/upload_photo/loader.gif" alt="Загрузка ..."/>';
    kod += '<span>Идет загрузка...</span>';
    kod += '</div>';
    kod += '</form>';

Отображается форма нормально, но судя по всему просит кнопку submit. То есть показывает что файлы выбраны, и на этом все...
Как сделать, чтобы форма работала без сабмита?

Обработчик выглядит так

$('#photoimg').change(function() { ......}

Обработчик после всех этих манипуляций назначен?

form.submit(). Но в общем то зачем вообще нужна форма в таком случае, достаточно одного поля file, Ajax, FormData и обрабатывать прогресс загрузки вместо include/upload_photo/loader.gif.

Спасибо за внимание к моему вопросу. У меня скрипт обработки формы и скрипт вывода данной страницы находятся в одном файле. Структура его такая:

jQuery(document).ready(function ($){
....
тут скрипт ajax формы (см ниже)
...
}); 
.....
// нажатие на товар из списка для его последующего отображения
function open_item(iditem) {
 $.ajax({
    type: "POST",
    url: "adm_editpost.php",
    data: ("func=query_item&iditem="+iditem),
    dataType: "JSON",
    cashe: false,
    success: function(response){
      show_item(response);
     },
    error: (function() { 
    	alert("Ошибка выполнения"); 
    }),
 });
}
....

вот скрипт ajax-обработчик полностью:

// функция ajax загрузки фото 
// функция ajax загрузки фото 
 $('#photoimg').change(function() { 
  	  var file_data = $('#photoimg').prop('files');
      function count(obj) {
          var count = 0; 
          for(var prs in obj) { 
             if(obj.hasOwnProperty(prs)) count++;
    	  } 
          return count; 
      }
    for(var i = 0; i < count(file_data); i++){
		var file_dat000 = $('#photoimg').prop('files')[i];
		var form_data = new FormData();
    form_data.append('file', file_dat000);
    var iditem = $("#iditem").val();
    form_data.append('iditem', iditem);
    $.ajax({
                url: 'include/upload_photo/ajax_upload.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                beforeSend:function(){ 
					$("#imageloadstatus").show();
					$("#imageloadbutton").hide();
				},
                success: function(response){
	                $("#imageloadstatus").hide();
					$("#imageloadbutton").show();
                    //alert(response);
 					show_picture(response);
                },
                error: function(){
	 				$("#imageloadstatus").hide();
					$("#imageloadbutton").show();               	
                },
                complete: function(){
	 				$('#photoimg').val('');
                },
     });
	}
});

var form_data = new FormData(); - должно объявляться один раз до цикла.

var file_dat000 = $('#photoimg').prop('files')[i];
form_data.append('file', file_dat000);

Это не правильно, массив $_FILES будет содержать только последний файл из присланных. Ключ может быть один, но содержать массив. А $('#photoimg').prop('files')[i] - это вообще не то.

А это что такое:

var iditem = $("#iditem").val();
form_data.append('iditem', iditem);

и тоже под одним ключом?

Это можно заменить на (вне ajax):

$(document).on({
        ajaxStart: /*действия при старте запроса*/,
        ajaxStop: /*действия по окончании запроса*/
    });

Это будет срабатывать для всех асинхронных запросов!

Для одного товара я загружаю несколько изображений за один раз.
В форме я выделяю несколько файлов. Далее циклом перебираю эти файлы. Например беру один файл добавляю в formdata, добавляю туда же переменную ид товара (чтобы обработчик понял куда загружать файл и как прописать его в БД). И так, в цикле, каждый файл вместе с переменной отправляю в обработчик.
Все это работает

var form_data = new FormData();
for(var i=0; i < this.files.length; i++) {
    form_data.append('file[]', this.files[i]);
}

Это все что требуется. И получите на сервере в $_FILES под ключом file массив загруженных файлов. Обходите его циклом, проверяя ключ error и если он равен 0, производите другие необходимые проверки и действия, загружая файлы в каталог.

Что такое $("#iditem").val(); и зачем?

Это ид товара. Передаю в обработчик файлы и номер товара. Использую его для для добавления записи фото по ID товара.

Подскажите пожалуйста в какое место файла добавить это скрипт- обработчик формы, чтобы он также полноценно работал? Подозреваю, что дело в области видимости вновь добавленной формы.

Уже ведь говорилось, что при редактировании товара, его ID просто связать с именем поля file - name="file[id_товара]".

При этом товар уже может иметь ранее добавленные изображения, которые можно заменить на новые, только в этом случае полем file можно выбрать только один файл.

То есть сервер может получить для товара как новые файлы для замены имеющихся, так и новые добавляемые. И сделать это очень просто:

name="file[id_товара][id_изображения]" - это обновляемые изображения

name="file[id_товара][0][]" multyple - это новые, поле со множественным выбором

$_FILES будет содержать:

[file => [
    id_товара => [
        0 => [
             0 => [новое],
             1 => [новое],
             .....
        ],
         id_изображения => [обновление],
         id_изображения => [обновление],
         .....        
    ]
]

Что может быть проще. Если уж передавать id товара отдельно, то скрытым поле, а не через #id и целую кучу.

Какой скрипт, что я привел?