Отправка файлов через ajax

Очень часто нужно разработать функционал для какой-нибудь формы, которая содержит поле с файлом, в popup окошке. Т.е. нужно отправить файл на сервер без перезагрузки страницы.

Ниже представлен один из вариантов такой отправки. Для начала html:

<form action="" onsubmit="return writeMeSubmit(this);">
	<input id="fname" type="text" placeholder="Компания или Имя *">
	<input id="fphone" type="text" placeholder="Телефон *">

	<input id="file_v" type="file" />

	<div id="message_form"></div>
	<input type="submit" value="Написать нам!">
</form>			


Тут все понятно, input с файлом, с кнопкой, а также пару инпутов с именем и телефоном для примера. На форму повешен обработчик отправки формы, рассмотрим функции что он вызывает:

</script type="text/javascript">
function writeMeSubmit(form){
	//создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
	var formData = new FormData();
	
	//не забывайти проверить поля на заполнение
	//код проверки полей опустим, он к статье не имеет отнашение

	//присоединяем наш файл
	jQuery.each($('#file_v')[0].files, function(i, file) {
		formData.append('file_v', file);
	});

	//присоединяем остальные поля
	formData.append('name', $('input#fname').val());
	formData.append('phone', $('input#fphone').val());

	//отправляем через ajax
	$.ajax({
		url: "/ajax_form.php",
		type: "POST",
		dataType : "json", 
		cache: false,
		contentType: false,
		processData: false,			
		data: formData, //указываем что отправляем
		success: function(data){
			if(data.ok == 'Y'){
				//если ок, выводим сообщение
				$('#message_form').html('<p style="color: green; text-align: center; margin: 20px 0;">Сообщение успешно отправлено!<br>В ближайшее время мы свяжемся с Вами!</p>');
				setTimeout(function() { $('#message_form').html(' '); }, 8000);
			}else{
				$('#message_form').html('<p style="color: red; text-align: center; margin: 20px 0;">Сообщение не может быть отправлено!<br>Попробуйте позже!</p>');
				setTimeout(function() { $('#message_form').html(' '); }, 8000);					
			}
		}
	});
	
	return false;	
}
<//script>



Посмотрим пример обработки на сервере, а также отправку файла на почту на языке php:


Не забудьте в папке куда сохраняете файлы, в примере это /upload/ запретить права на исполнение некоторых расширений файлов. Пример как это можно сделать через файл .htaccess:

<IfModule mod_mime.c>
	<Files ~ \.(php|php3|php4|php5|php6|phtml|pl|asp|aspx|cgi|dll|exe|shtm|shtml|fcg|fcgi|fpl|asmx|pht|py|psp|rb|var)>
		SetHandler text/plain
		ForceType text/plain
	</Files>
</IfModule>
<IfModule mod_php5.c>
	php_flag engine off
</IfModule>