Ну, отправить файл на сервер легко - с помощью
формы:
<form method="POST" name="f" action="/PHP/TesT.php" onsubmit="return false;">
<input name="name" value="Вова" type="text">
<input name="family" value="Пупкин" type="text">
<input name="data" value="value" type="text">
<input name="file" type="file">
<button name="submit" onclick="sendForm(this.form); return false;">Отправить</button>
</form>
<script type="text/javascript">
'use strict';
function sendForm (f) {
var button= f.submit;
// very stuped validation
if(f.data.value.length) {
var xhr = new XMLHttpRequest();
// console.log('xhr= ', xhr);
xhr.open('POST', f.action, true);
var fS= new FormData(f);
xhr.send(fS);
console.log('fS= ', fS);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) {
console.log('xhr.readyState= ', xhr.readyState);
return;
}
button.textContent = 'Готово!';
alert(xhr.status != 200 ? xhr.status + ': ' + xhr.statusText: xhr.responseText);
}
button.textContent = 'Загрузка...';
button.disabled = true;
}
}
</script>
А для того, чтобы проверить форму на сервере, избежать всяких уязвимостей, и сохранить файл, как и писали выше, нужна серверная часть кода.