Создание превью фото для формы

 Для лэндинг страниц и сайтов не желательна перезагрузка страницы при отправке форм. Лучше когда пользователь сразу видит результат работы на странице.

Имеем страницу и на ней форму

<div class="constructor-form-2">
	<h3 class="calculate-work-title">Рассчитать стоимость работы</h3>
	<div class="form-2-wrap">
		<form action="" id="raschet_sr" enctype="multipart/form-data">
			<div class="form-field input-form-field">
<label for="name">Имя:</label>
<input id="name" name="name" type="text" placeholder="Инакентий"/></div>
			<div class="form-field input-form-field">
				<label for="auto-brand">Бренд автомобиля:</label>
				<select name="auto-brand" id="auto-brand">
					<option value="Audi">Audi</option>
					<option value="BMW">BMW</option>
					<option value="Hammer">Hammer</option>
					<option value="ВАЗ">ВАЗ</option>
				</select>
			</div>
			<div class="form-field input-form-field"><label for="tel">Телефон:</label><input id="tel" name="tel" type="tel"/></div>
			<div class="form-field input-form-field">
				<label for="auto-type">Марка автомобиля:</label>
				<select name="auto-type" id="auto-type">
					<option value="A3">A3</option>
					<option value="350">350</option>
					<option value="H3">H3</option>
					<option value="21010">21010</option>
				</select>
			</div>
			<div style="display:none;background:#fff;float:left;width:200px;height:155px;position:absolute;left:100px;" id="pv_div"><img src="" style="width:180px;height:135px;margin:10px;" id="pv_img"></div>
			<div class="form-field broken-item"><label for="broken-item">Прикрепите фото поврежденной детали:</label><input id="broken-item" name="broken-item" type="file"/></div>
			<div class="form-field order-field">
				<button id="order-btn-2" type="submit" name="ORDER_2" value="order_2">Рассчитать стоимость ремонта</button>
			</div>
		</form>
	</div>
</div>

Здесь стоит уделить внимание блоку

<div style="display:none;background:#fff;float:left;width:200px;height:155px;position:absolute;left:100px;" id="pv_div">
  <img src="" style="width:180px;height:135px;margin:10px;" id="pv_img">
</div>

Этот блок будет отображаться после загрузки фото и атрибут src у img будет подставляться после получения имени файла.

Самое главное для форм с загрузкой файлов это

<form action="" id="raschet_sr" enctype="multipart/form-data">

указание enctype

<input id="broken-item" name="broken-item" type="file"/>

Само поле для выбора файла

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

Но здесь мы постараемся отобразить фото пользователя прямо после выбора фотографии пользователем. Для этого будем использовать jQuery:

Не забываем подключать в head jQuery

<script src="http://yastatic.net/jquery/2.1.1/jquery.min.js"></script>

и в head напишем следующий код

$(document).ready(function(){
	$(document).on("change", "#broken-item", function(){
		fdata = new FormData();
		fdata.append('broken-item', $('#broken-item')[0].files[0]);
		$.ajax({ type: "POST", url: "/al_foto.php",data: fdata, dataType: 'json', processData: false,contentType: false,
			success: function(data){
				if (data.err==""){
					$("#pv_img").attr("src","/upload/"+data.file);
					$("#pv_div").show();
				}
			}
		});
		return false;
	});
});

Здесь вешаем обработчик на тэг с id = broken-item событие change. Т.е. после изменения этого элемента (выбор файла) будем делать следующее:

fdata = new FormData(); // Создадим массив данных для отправки формы

fdata.append(‘broken-item’, $(‘#broken-item’)[0].files[0]); // добавим к массиву элемент broken-item с нашим файлом $(‘#broken-item’)[0].files[0] — именно так его писать, по другому не получалось.

Т.е. обычным serrialize не получится передать поле file в ajax отправке данных.

fdata.append — можно формировать свою форму — элемент и значение

Далее стандартный $.ajax в нем не забываем указать processData: false,contentType: false,

dataType: ‘json’ — необходимо для лучшего разбора данных

$(«#pv_img»).attr(«src»,»/upload/»+data.file); //меняем src у img
$(«#pv_div»).show(); //отображаем блок с фото

Файл al_foto.php

if (isset($_FILES["broken-item"])){//ПОДГРУЗКА ФОТО
	$rez=array(); $rez['err']=''; $rez['file']='';
	if($_FILES["broken-item"]["size"] > 1024*3*1024){
		$rez['err'] = "Размер файла превышает три мегабайта";
	}
	if($rez['err']==''){
		$fileName = $_FILES["broken-item"]['name'];
		if(is_uploaded_file($_FILES["broken-item"]["tmp_name"])){
			move_uploaded_file($_FILES["broken-item"]["tmp_name"], "upload/".$fileName);
			$rez['file'] = $fileName; 
		} else {
			$rez['err'] = "Ошибка загрузки файла ".$_FILES["broken-item"]["tmp_name"];
		}
	}
	echo json_encode($rez);
	exit;
}

Здесь проверяем есть ли загрузка файла?

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

Проверяем на существование ошибок, если нет тогда загружаем файл.

$rez[‘file’] = $fileName;  — сохраняем имя файла

Оператор echo json_encode($rez); выводит в браузер закодированные данные массива в формате json, чтобы мы в javascript смогли легче их получить.