Массив из input нужно отправить через ajax, принять, и записать в базу?

Question

[lilikon]

Начну из далека, то что работает:

<input class="form-control" name="images[]" type="file"><p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>

$(document).on('change','input[name="images[]"]',function(e){
		if ((e.target.files.length>0)&&($(this).next('p').next('input[name="images[]"]').length==0) && ($('input[name="images[]"]').length<countFiles)) {
			$(this).next('p').after('<input class="form-control" name="images[]" type="file" ><p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>');
		}
		if (e.target.files.length>0) {
			var file = e.target.files[0];		  
			if (!file.type.match(typeFile)) {
				$(this).next('p').text('* Файл не будет отправлен, т.к. его тип не соответствует разрешённому');
			}
			else {
				if ($(this).next('p')) {
					$(this).next('p').text('');
				}
			}
		}
		else {
			$(this).next('p').text('* Файл не будет отправлен, т.к. он не выбран');
		}
	});

js+ajax

var images = document.getElementsByName("images[]");
			for (var i = 0; i < images.length; i++) {
				var fileList = images[i].files;
				if (fileList.length > 0) {
					var file = fileList[0];
					if (file.type.match('image.*')) {
						formData.append('images[]', file, file.name);
						console.log(file);
					}
				}
			}
/*сам ajax писать не буду, он рабочий но длинный*/

if ($data['result']=='success') {
		if(isset($_FILES["images"])) {
			$filesimages = array();
			foreach ($_FILES["images"]["error"] as $key => $error) {
				if ($error == UPLOAD_ERR_OK) {
					$nameFile = $_FILES['images']['name'][$key];
					$extFile = mb_strtolower(pathinfo($nameFile, PATHINFO_EXTENSION));
					$filetype = $_FILES['images']['type'][$key]; 
					if (!array_key_exists($extFile, $allowedExtension)) {
						$data['files']='Ошибка при загрузке файлов (неверное расширение).';
						$data['result']='error';
					}
					elseif (!in_array($filetype, $allowedExtension)){
						$data['files']='Ошибка при загрузке файлов (неверный тип файла).';
						$data['result']='error';
					}
					else
					{
						$tmpFile = $_FILES['images']['tmp_name'][$key];
						$newFileName = uniqid('img_', true).'.'.$extFile;
						$newFullFileName = $pathToFile2.$newFileName;
						if (!move_uploaded_file($tmpFile, $newFullFileName)) {
							$data['files']='Ошибка при загрузке файлов.';                
							$data['result']='error';
						}
						else
						{
							$filesimages[] = $newFullFileName;
						}
					}
				}
				else
				{
					$data['result']='error';
				}
			}
		}
	}
if (isset($filesimages)) {		
		foreach ($filesimages as $value) {
			$db->query("INSERT INTO gallery(nameid,image) VALUES('".$nameid."','".$value."')");
		}
	}

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

А теперь мне надо написать то же самое но только с другим типом :

<div id="video">
							<p class="control-label col-sm-3">Ссылка на видеоролик</p>
							<div class="control-group" >
								<p class="control-label col-sm-3"></p>
								<div class="col-sm-6">
									<input class="form-control" name="video[]" type="text" style="width: 92%;float: left;"><a class="del_variant">X</a>
								</div>								
							</div>							
						</div>
<span id="ss">Добавить видеоролик</span>

$(document).ready(function () {
		var variant = $('.control-group').clone(true);
		$('#ss').click(function () {
			$(variant).clone(true).appendTo('#video').fadeIn('slow').find("input[name*=video]").focus();
			if($('.control-group').length == 10) $(this).hide();
		});
		$(document).on('click', 'a.del_variant', function () {
			$(this).parents(".control-group").remove();
			if($('.control-group').length < 10) $('#ss').show();
		});
	});

Поля создаются, в них можно вписать данные, НО
Как передать их js?

var video = $("input[name='video[]']").val();
			for (var i = 0; i < video.length; i++) {
				var list = video[i];
				formData.append('video[]', list);
			}

пытаюсь так но в итоге в базу попадает лишь одно значение, и оно делится на буквы, то есть каждая буква в отдельную строку базы

Answer 1

[ThunderCat]

var video = $("input[name='video[]']").val();

на сколько я понимаю (не суперспец в жс) здесь вы получаете одно значение, не массив значений. Я не уверен какое, первое или последнее, но точно не массив всех значений из инпутов. По идее вообще должно выдавать ошибку, но это можно проверить выведя в консоль что там у вас получилось в video. Соответственно получить все инпуты в массив, а затем уже к каждому в форе применять .val(); В итоге получить массив, как его отправлять уже вопрос вкуса, имхо проще зажсонить и отослать как строку, где и распарсить.

Comments

[lilikon]

ThunderCat это лишь передает одно значение, а так как полей name='video[]' несколько их так же не описать сразу, т.к. при выборе одного, если нажать на кнопку добавить видео, добавляется дополнительное поле в которое еще раз можно ввести ссылку на ролик и он то же имеет name='video[]', в итоге:
бывает надо внести лишь 1 видеоролик, а иногда сразу 10
и если все инпуты в js прописать, то он выдает ошибку так как поле отсутствует
Вот мне и надо по аналогии с галереей, сделать и видео

[ThunderCat]

lilikon: вы вообще прочли что я написал? или вы скопировали код и не очень разбираетесь в коде?

[lilikon]

ThunderCat: Спасибо за подстказку, я решил. Вот итог и он работает корректно:
var video = $("input[name='video[]']").serializeArray();
for (var i = 0; i < video.length; i++) {
var list = video[i].value;
formData.append('video[]', list);
}