Отправка файла через Ajax с использованием jQuery

02.12.2015

Пример передачи файла на сервер без перезагрузки страницы.

test.php (Download)

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
$(function() {
	$('#go_on').click(function(){

    	var data = jQuery('#simplecheckout_form').find('input,select,textarea').serialize();

//--console.debug(data);


		var fd = new FormData();
		fd.append('id', '123');
		fd.append('type', 'one');
		fd.append('img', $('#imgFile')[0].files[0]);

		$.ajax({
			type: 'POST',
			url: 'response.php',
			data: fd,
			processData: false,
			contentType: false,
//			dataType: "json",
			dataType: "text",
			success: function(data) {
				$(".message_title").html('OK');
				$(".message").html(data);
			},
			error: function(data) {
				$(".message_title").html('Error');
				$(".message").html(data);
			}
		});
	});
});
</script>






<div class="message_title"></div>
<div class="message"></div>

<form id="simplecheckout_form" action="">
	<input type="text" name="name" value="Name1" />
	<input type="text" name="email" value="e-mail" />
	<input type="text" name="tel" value="555-55-55" />
	
	<input type="file" id="imgFile" />
	
	<input type="hidden" name="" />
</form>

<button type="button" id="go_on">Go<br/><br/>Go</button>

response.php (Download)

 <?

    echo '<pre>FILES:<br />';
      print_r($_FILES);
    echo 'REQUEST:<br />';
      print_r($_REQUEST);
    echo '</pre>';

?>


Категории: JavaScript
Яндекс.Метрика