Примечание. Если нижеприведенный код не работает, то настоятельно рекомендуется проверить права для папок, в которые загружаются файлы на сервер. Они должны иметь права на запись.
Есть возможность реализации этой затеи 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); } ?>