Jquery+Ajax. Загрузка файлов с 2х input
День добрый. Имеются два input, в одном выбираются изображения, в другом - видео. Нужно организовать одновременную загрузку файлов с этих 2х input на сервер. Ниже пример того, как я уже попытался сделать, но, как понимаете - не работает. Прошу подсказки как организовать данный процесс грамотно
<div class="form-group">
<input type="file" id="img-on-edit" accept="image/jpeg, image/png, image/jpg" multiple>
<input type="file" id="vid-on-edit" accept="video/mp4, video/avi, video/3gp, video/mov" multiple>
<button id="update" type="button">Сохранить</button>
</div>И имеется обработчик нажатия на кнопку #update
var videos_to_load;
var images_to_load;
$('body').on('change', '#vid-on-edit', function(event) {
delete videos_to_load;
videos_to_load = this.files;
});
$('body').on('change', '#img-on-edit', function(event) {
delete images_to_load;
images_to_load = this.files;
});
$('#update').on('click', function() {
var filesFormData = new FormData();
$.each(images_to_load, function(key, value){
filesFormData.append(key, value);
});
$.each(videos_to_load, function(key, value){
filesFormData.append(key, value);
});
$.ajax({
url: 'php/update_application.php,
type: 'POST',
data: filesFormData,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(res){
console.log(res)
},
error: function(res){
console.log(res)
}
});
});