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

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

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

<script src="/js/jquery1.8.1.min.js"></script> 
<script src="/js/jquery.wallform.js"></script>

Далее, необходимо написать 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:ffunction(){ 
					
		   $("#imageloadstatus").show();
		   $("#imageloadbutton").hide();
			          
                }, 
					
               success:function(){
						
		    $("#imageloadstatus").hide();
		    $("#imageloadbutton").show();
					 
	        }, 
					
               error:function(){
 
	            $("#imageloadstatus").hide();
		    $("#imageloadbutton").show();
	       
                } }).submit(); 				
	});
 });

И саму форму:

<div id='preview'></div>	
<form id='imageform' method='post' action='index.php' style='clear:both'> 
   <div id='imageloadstatus' style='display:none'><img src='loader.gif' alt='Uploading....'/></div>
   <div id='imageloadbutton'>
      <input type='file' name='photos' id='photoimg' accept="image/jpeg" />
   </div>
</form>