Добавленная 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() { ......}
|
Обработчик после всех этих манипуляций назначен?
|
Цитата:
|
Спасибо за внимание к моему вопросу. У меня скрипт обработки формы и скрипт вывода данной страницы находятся в одном файле. Структура его такая:
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); и тоже под одним ключом? |
Цитата:
$(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(); и зачем? |
Цитата:
Подскажите пожалуйста в какое место файла добавить это скрипт- обработчик формы, чтобы он также полноценно работал? Подозреваю, что дело в области видимости вновь добавленной формы. |
Цитата:
При этом товар уже может иметь ранее добавленные изображения, которые можно заменить на новые, только в этом случае полем file можно выбрать только один файл. То есть сервер может получить для товара как новые файлы для замены имеющихся, так и новые добавляемые. И сделать это очень просто: name="file[id_товара][id_изображения]" - это обновляемые изображения name="file[id_товара][0][]" multyple - это новые, поле со множественным выбором $_FILES будет содержать:
[file => [
id_товара => [
0 => [
0 => [новое],
1 => [новое],
.....
],
id_изображения => [обновление],
id_изображения => [обновление],
.....
]
]
Что может быть проще. Если уж передавать id товара отдельно, то скрытым поле, а не через #id и целую кучу. Цитата:
|
Блин, спасибо огромное за скрипт. Завтра буду весь день переваривать ваш код.
Теперь по месту его применения. Вот что я делаю: есть страница на которой два блока. Один блок со списком товаров, второй блок - скрытый, в нем будут отображаться характеристики выбранного из списка товара. Нажимаю на строку списка, этот блок скрывается, отправляется ajax запрос к бд, получаю данные о товаре и вывожу их во втором блоке. Во втором блоке также формируется и отображается форма выбора файлов для загрузки фото товара. Обращаю внимание: весь код второго блока формируется в js. Вот только при таком раскладе форма не работает как надо. Я подозреваю что скрипт обработки этой формы находится не на своем месте. edit_items.js- файл со скриптами. Вот его структура:
jQuery(document).ready(function ($){
....
тут ajax скрипт отправки формы в обработчик
...
});
.....
// Далее пошли разные функции
...
// функция отображения характеристик товара
// формирую второй блок полностью
function open_item(iditem) {
Вот тут снова формирую новый код html, в нем эта форма
}
....
то есть форма формируется за пределами jQuery(document).ready(function ($) Может из-за этого она не работать? |
Цитата:
По тому что показано трудно сказать почему не работает, даже что именно не работает и это не известно. |
Как я понял при инициализации страницы на некую форму навешивается обработчик.
После неких манипуляций html формы изменяется (пост 1) и после этого все перестает работать. Вы делегировать обработку события не пробовали? При изменении html кода обработчики события с замененных элементов удаляются. |
<div id="form">
<button type="submit" id="button">CLick me</button>
</div>
<div id="form2">
<button type="submit" id="button2">CLick me</button>
</div>
<script>
var _get=function(id){
return document.getElementById(id);
};
_get('button').onclick=function(){
alert('First button');
_get('form').innerHTML=_get('form').innerHTML;
_get('button').innerHTML='Click more';
};
_get('form2').onclick=function(e){
if(e.target.tagName.toLowerCase()!='button')
return;
alert('Second button');
_get('form2').innerHTML=_get('form2').innerHTML;
_get('button2').innerHTML='Click more';
};
</script>
|
| Часовой пояс GMT +3, время: 17:34. |