Файл на сервер AJAX

Как отправить файл на сервер через Ajax?

Отправка файлов черех ajax возможна и делается она очень просто, как стандартными средствами так и с помощью готовых библиотек. Сегодня мы рассмотрим отправку с помощью фреймворка scriptjava.js.

Для отправки файла подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:


<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Теперь нужно поместить на сайте форму, которая будет заниматься отправкой файла. Т.е. поместить кнопку обзор чтобы можно было выбрать файл для отправки.


<form id="test_form" method="post" enctype="multipart/form-data" onSubmit="">
    <input class="file_form" type="file" name="upload_file" />
</form>
<div id="result">Тут будет статус загрузки</div>
<div onclick="SendFile();">Отправить файл через Ajax</div>

Как Вы можете заметить в форме нет кнопки Отправить. У формы обязательно должен быть id, в нашем случае id="test_form".

Отлично, все готово. Теперь осталось только отправить файл.

Для этого необходимо написать js код, который будет отправлять файл на сервер через 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+'
файл успешно загружен');//в элемент с id="result" выводим результат } }); } </script>

При нажатии на что либо нужно вызвать функцию SendFile(), которая будет отвечать за отправку файла через Ajax:

У нас это:


<div onclick="SendFile();">Отправить файл через Ajax</div>

Как получать ответ от файла 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+"
Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт"; </script> '; } ?>

Как видите все очень просто и отправить файл через javascript на сервер можно, и это не составляет большого труда

Поделитесь статьей со своими друзьями