СВЕТ: СПАСИБО
01-12-2023
Читать статью
Калужский Александр: Задача про Цаплю: https://www.youtube.co..
24-11-2023
Сергей: спасибо большое
Сегодня разберём скрипт для загрузки файла на сервер без перезагрузки страницы через технологию 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)) { } } }
$(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>
В корне сайта должна лежать картинка loader.gif, которая показывает статус загрузки.