10.02.2016 18:45:05
Далеко не всегда удобно обновлять страницу при отправке формы. Существует великое множество плагинов для этой цели, но иногда целый плагин не нужен или он не достаточно гибок. Вот пример того, как можно закачать картинки на сервер (приведена только фронтэнд часть)
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

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

<script type="text/javascript">

$(function() {
	
	function addMessage(message)
	{
		$(".message").html( $(".message").html() + "<br />\n" + message );		
	}
	
    $('#btnGo').click(function(){

        var elFiles = $('#File1')[0].files;
        
		for (var i = 0; i < elFiles.length; i++) {
	
	        var fd = new FormData();
	        fd.append('id', '1');
	        fd.append('id_cat', '12');
	        fd.append('text', 'tExT');
	        fd.append('img', elFiles[i]);

	        $.ajax({
	            type: 'POST',
	            url: 'http://dtm-podolsk.oddler.ru/03/response.php',
	            data: fd,
	            processData: false,
	            contentType: false,
	//            dataType: "json",
	            success: function(data) {
	                //$(".message_title").html('OK');
	                addMessage( data );
	            },
	            error: function(data) {
	                $(".message_title").html('Error!!!');
	                addMessage( data );
	            }
	        });
		}
    });
    

    
});
</script>


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

<form id="form1" action="">
    <input type="file" id="File1" multiple="multiple" />
</form>

<button type="button" id="btnGo">Go</button>


</body>
</html>

Тэги: JQuery

Яндекс.Метрика