wikipoints/ground/views/modals/addPoint.php

<div class="modal fade" id="addPointModal" tabindex="-1" role="dialog" aria-labelledby="Добавление новой точки" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Добавление новой точки</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 0;">
				<img id="imgPreview" style="display: none; position: absolute; top: 10px; left: 180px; height: 150px; border: solid 3px #777;" src="" onclick="hidePerview()"/>
                <form method="POST" action="/json/addpoint/" id="addPointForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="control-label" for="name">Название</label>
                        <label class="control-label error" for="name">(Слишком короткое название точки)</label>
                        <input type="text" id="addPointName" name="name" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="description">Описание</label>
                        <label class="control-label error" for="description">(Слишком короткое описание - минимум 25 символов)</label>
                        <textarea id="addPointDescription" name="description" class="form-control" rows="4"></textarea>
                    </div>

					<div class="form-group extraImage asLink">
                        <label class="control-label" for="imgs">Файлы и ссылки на изображения</label>
                        <label class="control-label error" for="imgs">(Что-то не так с изображениями!)</label>
                        <span class="btn btn-sm add button" onclick="addNewImage()" title="Добавить ещё одно изображение"><span class="glyphicon glyphicon-plus"></span></span>
                    </div>
					<div id="imgsContainer">
					</div>

                    <div class="form-group">
                        <label class="control-label" for="categoryId">Тип</label>
                        <select id="addPointCategoryId" name="categoryId" class="form-control">
                            <?php foreach ($categories as $category): ?>
							<option value="<?= $category->id ?>"><?= $category->name ?></option>
							<?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="source">Ссылка на источник</label>
                        <input type="text" id="addPointSource" name="source" class="form-control" placeholder="http://" />
                    </div>

					<div class="form-group">
						Координаты:
						<input type="text" id="addPointLat" name="lat" class="form-control input-sm" style="width: 145px; display: inline-block;" readonly="readonly" />
						<input type="text" id="addPointLng" name="lng" class="form-control input-sm" style="width: 145px; display: inline-block;" readonly="readonly" />
						<button type="button" class="btn btn-sm btn-default" onclick="editSetNewCoords();"><span class="glyphicon glyphicon-screenshot"></span> изменить координаты</button>
					</div>
                </form>
            </div>
            <div class="modal-footer">
				<select id="moderate" name="moderate" class="form-control" style="width: 40%; display: <?= (App::$user && App::$user->isAdmin == 1)?'inline-block':'none'?>; padding-top: 5px; float: left;">
					<option value="hide">Скрыта - на модераци</option>
					<option value="show">Опубликована</option>
				</select>
                <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
				<button type="button" class="btn btn-primary" onclick="addPoint();">Сохранить</button>
            </div>

			<div id="newIm">
				<div class="form-group extraImage asLink" style="display: none;">
					<div class="input-group">
						<div class="input-group-addon type ico" title="Укажите ссылку на изображение"><input type="hidden" class="ordering" name="ordering[]" value="LINK" /><span class="glyphicon glyphicon-link"></span></div>
						<input type="text" name="imgs[]" class="form-control images" placeholder="http://" />
						<div class="input-group-addon type preview" style="border-left: 0;" onclick="showPreview($(this))" title="Предпросмотр"><span class="glyphicon glyphicon-eye-open"></span></div>
						<div class="input-group-addon type button" onclick="switchType($(this))" title="Изменить поле на загрузку файла"><span class="glyphicon glyphicon-transfer"></span></div>
						<div class="input-group-addon remove button" onclick="removeInput($(this))" title="Удалить это поле"><span class="glyphicon glyphicon-trash"></span></div>
					</div>
				</div>
			</div>
        </div>
    </div>
</div>
<script>
	function addNewImage(link)
	{
		if ($('.extraImage', '#addPointForm').length < 10)
		{
			$('.extraImage', '#newIm').clone().appendTo('#imgsContainer').show(200);
			if (link != undefined)
			{
				$('.form-control.images', '#addPointForm').last().attr('readonly', 'readonly').val(link);
				$('.input-group-addon.type.button', '#addPointForm').remove();
			}
		}
	}

	function removeInput(el)
	{
		container = $(el).parent().parent();
		container.hide(300, function(){container.remove()});
	}

	function switchType(el)
	{
		container = $(el).parent().parent();
		if (container.hasClass('asLink'))
		{
			$('.ordering', container).val('FILE');
			$('.ico span', container).removeClass('glyphicon-link').addClass('glyphicon-paperclip');
			$('.form-control', container).attr('type', 'file').attr('name', 'photos[]');
			container.removeClass('asLink');
			el.attr('title', 'Указать ссылку на изображение');
			$('.input-group-addon.type.ico', container).attr('title', 'Загрузите файл с изображением');
			$('.input-group-addon.type.preview', container).hide();
		}
		else
		{
			$('.ordering', container).val('LINK');
			$('.ico span', container).removeClass('glyphicon-paperclip').addClass('glyphicon-link');
			$('.form-control', container).attr('type', 'text').attr('name', 'imgs[]');
			container.addClass('asLink');
			el.attr('title', 'Загрузить файл');
			$('.input-group-addon.type.ico', container).attr('title', 'Укажите ссылку на изображение');
			$('.input-group-addon.type.preview', container).show();
		}
	}

	function showPreview(el) {
		img = $('input.images',el.parent()).val();

		if ($('input.ordering',el.parent()).val() == 'FILE' || img.length < 12) {
			return true;
		}

		if (img.toLowerCase().indexOf('http') == -1 ) {
			img = '/photos/small/' + img;
		}

		$('#imgPreview').attr('src', img);
		$('#imgPreview').show();
	}

	function hidePerview() {
		$('#imgPreview').hide();
	}
</script>