Пример того, как можно отправить несколько файлов на сервер используя Ajax
10.02.2016
Далеко не всегда удобно обновлять страницу при отправке формы.
Существует великое множество плагинов для этой цели, но иногда целый плагин не нужен или он не достаточно гибок.
Вот пример того, как можно закачать картинки на сервер (приведена только фронтэнд часть)
<!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: '/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>