Загрузка файла на сервер при помощи AJAX и PHP

👁 110 просмотров

 

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

Есть возможность реализации этой затеи 2-мя способами:

  1. Чтобы файл загрузился после выбора файла автоматом;
  2. Чтобы файл грузил в последствии нажатии на кнопку загрузки.

Чтобы файл загрузился после выбора файла автоматом

Для этого сначала создадим форму и поле файла:

    <form method="post" enctype="multipart/form-data">
		  <div class="form-group">
		    <label for="file">Загрузка фотографии</label>
		    <input type="file" class="form-control-file" id="file" aria-describedby="fileHelp">
		    <small id="fileHelp" class="form-text text-muted">Загрузите новый баннер или установите из существующего списка.</small>
		  </div>
		  <div class="form-group" id="photo-content">
  
		  </div>
    </form>

Кода AJAX обработки на JS/jQuery:

	$(document).on('change','#file',function(event){
		event.preventDefault();
		
        var property = document.getElementById('file').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','png']) == -1){
          alert("Неправильный формат");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        console.log(form_data);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          cache:false,
          processData: false,
          contentType: false,
          beforeSend:function(){
            //$('#msg').html('Loading......');
          },
          success:function(data){
	    	  data = JSON.parse(data);
        	  var photo = `
          	  	<div class="img-item">
  			  		<img src='http://83.220.168.205/upload/upload/reklam/banners/`+data.fileName+`'/>
  		  		</div>
          	  `;
          	  $("#photo-content").append(photo);
          }
        });
      });

Серверная часть на PHP:

<?php

if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = './upload/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    $data = ["fileName"=>$name];
    echo json_encode($data);
}
?>

Чтобы файл загрузился после выбора и нажатия на кнопку

Клиентская часть на HTML:

    <form method="post" enctype="multipart/form-data">
		  <div class="form-group">
		    <label for="file">Загрузка фото</label>
		    <input type="file" class="form-control-file" id="file" aria-describedby="fileHelp">
		    <br/>
		    <button type="submit" class="btn btn-primary btn-start-upload">Загрузить</button>
		    <small id="fileHelp" class="form-text text-muted">Загрузите новый баннер или установите из существующего списка.</small>
		  </div>
		  <div class="form-group" id="photo-content">
		  
		  </div>
    </form>

Обработка на AJAX:

	$(".btn-start-upload").click(function(e){
		e.preventDefault();
		var formData = new FormData();
		formData.append('file', $('#file').prop("files")[0]);
        console.log(formData);
		$.ajax({
			  url: 'upload.php',
			  type: 'POST',
			  processData: false, // important
			  contentType: false, // important
			  cache:false,
			  dataType : 'text',
			  data: formData,
	          type: 'post',
		      success: function(data){
		    	  data = JSON.parse(data);
	        	  var photo = `
	          	  	<div class="photo-item">
	  			  		<div>
	  			  		<img src='http://mysitename.ru/upload/`+data.fileName+`'/>
	  			  		</div>
	  		  		</div>
	          	  `;
	          	  $("#photo-content").append(photo);
		      }
		});
	});

Серверная часть на PHP:

<?php

if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = './upload/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    $data = ["fileName"=>$name];
    echo json_encode($data);
}
?>