Блог

Загрузка файла ajax-ом

Чтобы загрузить файл ajax-ом :
1) html стандарный, но обязательно указать enctype="multipart/form-data" в форме


<form id="form-reg" enctype="multipart/form-data">

 <input name="userfile" class="userfile" id="userfile" type="file" />
 
 <input type="submit" id="reg_button" value="Регистрация" data-wait="Please wait..." class="form-cta-btn w-button"> 
</form> 

2) Дальше jquery :

<script type="text/javascript">  

// считываем данные о файле с формы на событие оnchange

        function readImage ( input ) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.readAsDataURL(input.files[0]);
            }
        } 
 

        $('#userfile').change(function(){
            readImage(this);
        }); 
 

// запускаем ajax 
 
        $('#form-reg').on('submit',(function(e) {
            e.preventDefault(); // остановим отправку формы
            var formData = new FormData(this); // получим данные с формы
            $.ajax({
                type:'POST', // Тип запроса
                url: /ajax.php', // Скрипт обработчика - здесь мы сохраняем файл на сервер
                data: formData, // Данные которые мы передаем
                cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся
                contentType: false, // Тип кодирования данных мы задали в форме, это отключим
                processData: false, // Отключаем, так как передаем файл
                success:function(data){
                    var obj=$.parseJSON(data);
                    if(obj.TYPE == "ERROR") {
                        $('.answer_reg').html('<div style="color: red;  text-align: center">' + obj.MESSAGE + '</div>');  // скрипт дал ошибку
                    }else{
                        $('.answer_reg').html('<div>Успешно!</div>'); //скрипт отработал успешно
                    }
                },
                error:function(data){
                    console.log(data); //ошибки сервера
                }
            });
        }));
    </script>