Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

Загрузка файла через Ajax


Сегодня разберём скрипт для загрузки файла на сервер без перезагрузки страницы через технологию ajax. Данный прием я нашёл на секретном индийском форуме.


Во-первых, необходима библиотека JQuery v. 1.8.1. Так же потребуется библиотека jquery.wallform.js. Все необходимый файлы можно скачать в конце статьи.


 


Далее, необходимо написать php скрипт, который обрабатывает наш файл. Не забудьте добавить код для проверки безопасности загружаемого файла. В данной статье я его не привожу, потому что данная тема требует отдельной статьи.



if(isset($_FILES['photos']['name'])) {
                        
    // !!! Здесь необходимо проверить файл на безопасность.
										
	$_FILES['photos']['name'] = stripslashes($_FILES['photos']['name']);
						
	$uploaddir = $_SERVER['DOCUMENT_ROOT'].'/images/';
	$uploadfile = $uploaddir.basename($_FILES['photos']['name']);

						
					
						
	// Проверяем - загружен ли фаил.
	if(is_uploaded_file($_FILES["photos"]["tmp_name"]))
	{
		// Переносим файл в папку images				
        if(move_uploaded_file($_FILES["photos"]["tmp_name"],  $uploadfile))
		{
									
		}
				
    }
}

Добавляем JavaScript:



 $(document).ready(function() { 
            
            
            $('#photoimg').die('click').live('change', function()			{ 

				$("#imageform").ajaxForm({target: '#preview', 
				     beforeSubmit:function(){ 
					
					console.log('ttest');
					$("#imageloadstatus").show();
					 $("#imageloadbutton").hide();
					 }, 
					success:function(){
						
				    console.log('test');
					 $("#imageloadstatus").hide();
					 $("#imageloadbutton").show();
					 
					}, 
					error:function(){ 
					console.log('xtest');
					 $("#imageloadstatus").hide();
					$("#imageloadbutton").show();
					} }).submit(); 
					
		
			});
        }); 


И саму форму:


В корне сайта должна лежать картинка loader.gif, которая показывает статус загрузки.


Скачать "Загрузка файла через Ajax"


Счастливого программирования!


05-11-2018 в 13:47:05





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

Похожая статья:

Видео с YouTube в модальном окне

Сегодня разберём скрипт "просмотр видео с youtube в модальным окне"...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 2



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота. Расположите картинки горизонтально:


Последние
видео:



Присылайте ваши задачи
Шейкер-сортировка (С#)


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy


Препод напал на тебя как вампир? Не бойся! Студланс защитит этот мир!