Как отправить файл на сервер через Ajax?
Как отправить файлы через скрытый фрейм iframe?
Для начала нужно поместить на сайте форму отправки файла.
Т.е. поместить кнопку обзор чтобы можно было выбрать файл для отправки.
<form id="test_form" method="post" enctype="multipart/form-data" onSubmit="">
<input class="file_form" type="file" name="upload_file" />
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendFile();">Отправить файл через Ajax</div><br />
Как видите в форме нет кнопки Отправить.
У формы обязательно должен быть id, в нашем случае id="test_form".
Отлично, все готово.
Теперь осталось только отправить файл.
Для отправки файла подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
Теперь нужно прописать код который будет отправлять файл на сервер через Ajax.
Пишем функцию отправки файла на сервер без перезагрузки страницы:
<script type="text/javascript">
function SendFile() {
//отправка файла на сервер
$$f({
formid:'test_form',//id формы
url:'ajax.php',//адрес на серверный скрипт который будет принимать файл
onstart:function () {//действие при начале загрузки файла
$$('result','начинаю отправку файла');//в элемент с id="result" выводим результат
}, onsend:function () {//действие по окончании загрузки файла
$$('result',$$('result').innerHTML+'<br />файл успешно загружен'гружен');//в элемент с id="result" выводим результат
}
});
}
</script>
При нажатии на что либо нужно вызвать функцию которая будет отвечать за отправку файла через Ajax:
SendFile();
Как получать ответ от файла ajax.php
Содержимое файла ajax.php
<?php
if($_FILES['upload_file']['size']>0) {
echo'<script type="text/javascript">
var elm=parent.window.document.getElementById("result");
elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES
['upload_file']['size'].' байт";
</script>
';
}
?>
Как видите все очень просто и отправить файл через JavaScript на сервер можно