Ajax Upload

Асинхронная загрузка файлов на сервер PHP + AJAX

Про загрузку файлов на сервер я писал здесь. Сегодня я расскажу про асинхронную загрузку файлов на сервер.

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В большинстве своём это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest .

В этой статье рассмотрим простое решение одной из самых распространенных задач – асинхронная загрузка файла на сервер при помощи PHP. Задача будет следующая: На странице (предположим, что это страница в личном кабинете пользователя) есть форма с input типа file и кнопка Отправить . Ниже находится контейнер с картинкой (аватар пользователя по задумке) в который асинхронно подгружается картинка после выполнения AJAX запроса. И по умолчанию она просто выводится из базы данных. То есть, при загрузке картинки новое сгенерированное название будет записываться в БД, сама картинка под этим названием загружаться на сервер и выводится в контейнере взамен предыдущей. И всё это асинхронно.

Сразу скажу, что я по бОльшей степени преследовал цель описать сам процесс загрузки, особо не сосредотачиваясь на «элегантности» кода ). Кто как захочет использовать этот код. Кто-то кусочек нужный возьмёт, кто-то целый класс напишет на его основе, кто-то переделает для себя, кто-то вовсе не будет его использовать никак. Тем более, там действительно, нужна доработка под боевые задачи. Например, валидацию на MIME-типы (и другие проверки) нужно делать ещё в JS до попадания данных скрипту PHP. В скрипт данные должны приходить отвалидированные. Или при загрузке картинки удалять на сервере старую картинку. Поэтому я решил, что полезнее будет подробно описать процесс, нежели допиливать до идеала то, что каждый для себя доработает как нужно. Поехали.

Безусловно, подключаем jQuery (если ещё в проекте нигде данная библиотека не подключена):

Простая разметка HTML формы и картинка из базы. Предположим, что у вас уже есть база данных и в базе уже есть таблица (например, user ). В блоке с id=»photo-content» выводится картинка из базы. Я весь этот код помещу в файле index.php .

prepare($query); $stmt->execute([$id]); $image = $stmt->fetchColumn(); ?>     
Image upload 
  
  
 
   

#wrapper < width: 60%; margin: 20px auto; >form button < margin-bottom: 50px; >input[type=text], input[type=file] < margin-bottom: 20px; >#process

$(document).ready(function()< $("#form-file-ajax").on('submit', function(e)< e.preventDefault(); var formData = new FormData(); var form = $(this); formData.append('file', $('#file').prop("files")[0]); $.ajax(< url: form.attr('action'), type: form.attr('method'), processData: false, contentType: false, cache:false, dataType : 'text', data: formData, // Будет вызвана перед осуществлением AJAX запроса beforeSend: function()< $('#process').fadeIn(); >, // будет вызвана после завершения ajax-запроса // (вызывается позднее функций-обработчиков успешного (success) или аварийного (error) complete: function () < $('#process').fadeOut(); >, success: function(data)< //form[0].reset(); data = JSON.parse(data); var image = '
'; var photoContent = $("#photo-content"); photoContent.html(''); photoContent.append(image); >, error: function(data) < console.log(data); >>); >); >);

 // Записать имя файла в БД $db = new PDO('mysql:host=localhost;dbname=ajax', 'root', 'password'); $user_id = 1; $query = "UPDATE `user` SET `avatar` = :avatar WHERE `id` = :user_id"; $params = [':avatar' => $file, ':user_id' => $user_id]; $stmt = $db->prepare($query); if (!$stmt->execute($params)) < throw new Exception('Произошла ошибка при записи в БД!'); >// Записать в $data имя файла $data = ['file' => $file]; echo json_encode($data); > catch (Exception $e) < die($e->getMessage()); > > > // Генерируем уникальное имя для файла function randomFileName($extension = false) < $extension = $extension ? '.' . $extension : ''; do < $name = md5(microtime() . rand(0, 9999)); $file = $name . $extension; >while (file_exists($file)); return $file; >

Вот и все. Ясное дело, что это не идеальное решение и как использовать его (если использовать) решать каждому самостоятельно. Может быть в дальнейшем я напишу специальный класс со всеми недочётами. А пока, как-то так.

Для работы данного примера без ошибок не забудьте заменить все адреса своими и указать корректные доступы к базе данных!

Источник

Загрузка файлов на сервер PHP

В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой. HTML-форма отправит файл только методом POST и с атрибутом enctype=»multipart/form-data» .

Форма для загрузки сразу нескольких файлов

Файл upload.php

• Поддерживает как одиночную загрузку файла так и множественную (multiple) без изменения кода.
• Проверка на все возможные ошибки которые могут возникнуть при загрузке файлов.
• Имена файлов переводятся в транслит и удаляются символы которые будут в дальнейшем мешать вывести их на сайте.
• Есть возможность указать разрешенные и запрещенные для загрузки расширения файлов.

// Название $input_name = 'file'; // Разрешенные расширения файлов. $allow = array(); // Запрещенные расширения файлов. $deny = array( 'phtml', 'php', 'php3', 'php4', 'php5', 'php6', 'php7', 'phps', 'cgi', 'pl', 'asp', 'aspx', 'shtml', 'shtm', 'htaccess', 'htpasswd', 'ini', 'log', 'sh', 'js', 'html', 'htm', 'css', 'sql', 'spl', 'scgi', 'fcgi' ); // Директория куда будут загружаться файлы. $path = __DIR__ . '/uploads/'; if (isset($_FILES[$input_name])) < // Проверим директорию для загрузки. if (!is_dir($path)) < mkdir($path, 0777, true); >// Преобразуем массив $_FILES в удобный вид для перебора в foreach. $files = array(); $diff = count($_FILES[$input_name]) - count($_FILES[$input_name], COUNT_RECURSIVE); if ($diff == 0) < $files = array($_FILES[$input_name]); >else < foreach($_FILES[$input_name] as $k =>$l) < foreach($l as $i =>$v) < $files[$i][$k] = $v; >> > foreach ($files as $file) < $error = $success = ''; // Проверим на ошибки загрузки. if (!empty($file['error']) || empty($file['tmp_name'])) < switch (@$file['error']) < case 1: case 2: $error = 'Превышен размер загружаемого файла.'; break; case 3: $error = 'Файл был получен только частично.'; break; case 4: $error = 'Файл не был загружен.'; break; case 6: $error = 'Файл не загружен - отсутствует временная директория.'; break; case 7: $error = 'Не удалось записать файл на диск.'; break; case 8: $error = 'PHP-расширение остановило загрузку файла.'; break; case 9: $error = 'Файл не был загружен - директория не существует.'; break; case 10: $error = 'Превышен максимально допустимый размер файла.'; break; case 11: $error = 'Данный тип файла запрещен.'; break; case 12: $error = 'Ошибка при копировании файла.'; break; default: $error = 'Файл не был загружен - неизвестная ошибка.'; break; >> elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >else < // Оставляем в имени файла только буквы, цифры и некоторые символы. $pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\\[\]\.]"; $name = mb_eregi_replace($pattern, '-', $file['name']); $name = mb_ereg_replace('[-]+', '-', $name); // Т.к. есть проблема с кириллицей в названиях файлов (файлы становятся недоступны). // Сделаем их транслит: $converter = array( 'а' => 'a', 'б' => 'b', 'в' => 'v', 'г' => 'g', 'д' => 'd', 'е' => 'e', 'ё' => 'e', 'ж' => 'zh', 'з' => 'z', 'и' => 'i', 'й' => 'y', 'к' => 'k', 'л' => 'l', 'м' => 'm', 'н' => 'n', 'о' => 'o', 'п' => 'p', 'р' => 'r', 'с' => 's', 'т' => 't', 'у' => 'u', 'ф' => 'f', 'х' => 'h', 'ц' => 'c', 'ч' => 'ch', 'ш' => 'sh', 'щ' => 'sch', 'ь' => '', 'ы' => 'y', 'ъ' => '', 'э' => 'e', 'ю' => 'yu', 'я' => 'ya', 'А' => 'A', 'Б' => 'B', 'В' => 'V', 'Г' => 'G', 'Д' => 'D', 'Е' => 'E', 'Ё' => 'E', 'Ж' => 'Zh', 'З' => 'Z', 'И' => 'I', 'Й' => 'Y', 'К' => 'K', 'Л' => 'L', 'М' => 'M', 'Н' => 'N', 'О' => 'O', 'П' => 'P', 'Р' => 'R', 'С' => 'S', 'Т' => 'T', 'У' => 'U', 'Ф' => 'F', 'Х' => 'H', 'Ц' => 'C', 'Ч' => 'Ch', 'Ш' => 'Sh', 'Щ' => 'Sch', 'Ь' => '', 'Ы' => 'Y', 'Ъ' => '', 'Э' => 'E', 'Ю' => 'Yu', 'Я' => 'Ya', ); $name = strtr($name, $converter); $parts = pathinfo($name); if (empty($name) || empty($parts['extension'])) < $error = 'Недопустимое тип файла'; >elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) < $error = 'Недопустимый тип файла'; >elseif (!empty($deny) && in_array(strtolower($parts['extension']), $deny)) < $error = 'Недопустимый тип файла'; >else < // Чтобы не затереть файл с таким же названием, добавим префикс. $i = 0; $prefix = ''; while (is_file($path . $parts['filename'] . $prefix . '.' . $parts['extension'])) < $prefix = '(' . ++$i . ')'; >$name = $parts['filename'] . $prefix . '.' . $parts['extension']; // Перемещаем файл в директорию. if (move_uploaded_file($file['tmp_name'], $path . $name)) < // Далее можно сохранить название файла в БД и т.п. $success = 'Файл «' . $name . '» успешно загружен.'; >else < $error = 'Не удалось загрузить файл.'; >> > // Выводим сообщение о результате загрузки. if (!empty($success)) < echo '
' . $success . '
'; > else < echo '
' . $error . '
'; > > >

Возможные проблемы

• На unix хостингах php функция move_uploaded_file() не будут перемещать файлы в директорию если у нее права меньше 777.
• Загрузка файлов может быть отключена в настройках PHP директивой file_uploads .
• Не загружаются файлы большого размера, причина в ограничениях хостинга.
  Посмотрите в phpinfo() значения директив:
  • upload_max_filesize – максимальный размер закачиваемого файла.
  • max_file_uploads – максимальное количество одновременно закачиваемых файлов.
  • post_max_size – максимально допустимый размер данных, отправляемых методом POST, его значение должно быть больше upload_max_filesize .
  • memory_limit – значение должно быть больше чем post_max_size .

  Не забудьте в директории куда помещаются загруженные файлы запретить выполнение PHP.

  Источник

  Saved searches

  Use saved searches to filter your results more quickly

  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

  PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload files to webserver

  License

  CreativeDream/php-uploader

  This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

  Name already in use

  A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

  Sign In Required

  Please sign in to use Codespaces.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching Xcode

  If nothing happens, download Xcode and try again.

  Launching Visual Studio Code

  Your codespace will open once ready.

  There was a problem preparing your codespace, please try again.

  Latest commit

  Git stats

  Files

  Failed to load latest commit information.

  README.md

  PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload/download files to webserver

  include('src/class.uploader.php'); $uploader = new Uploader(); $data = $uploader->upload($_FILES['files'], array( 'limit' => 10, //Maximum Limit of files. 'maxSize' => 10, //Maximum Size of files 'extensions' => null, //Whitelist for file extension. 'required' => false, //Minimum one file is required for upload 'uploadDir' => 'uploads/', //Upload directory 'title' => array('auto', 10), //New file name *please read documentation in README.md 'removeFiles' => true, //Enable file exclusion 'replace' => false, //Replace the file if it already exists 'perms' => null, //Uploaded file permisions 'onCheck' => null, //A callback function name to be called by checking a file for errors (must return an array) | ($file) | Callback 'onError' => null, //A callback function name to be called if an error occured (must return an array) | ($errors, $file) | Callback 'onSuccess' => null, //A callback function name to be called if all files were successfully uploaded | ($files, $metas) | Callback 'onUpload' => null, //A callback function name to be called if all files were successfully uploaded (must return an array) | ($file) | Callback 'onComplete' => null, //A callback function name to be called when upload is complete | ($file) | Callback 'onRemove' => 'onFilesRemoveCallback' //A callback function name to be called by removing files (must return an array) | ($removed_files) | Callback )); if($data['isComplete'])< $files = $data['data']; print_r($files); > if($data['hasErrors'])< $errors = $data['errors']; print_r($errors); >

  include('src/class.uploader.php'); $uploader = new Uploader(); $data = $uploader->upload('https://www.google.com/images/srpr/logo11w.png', array( 'uploadDir' => 'uploads/', //Upload directory 'title' => array('auto', 10), //New file name *please read documentation in README.md )); if($data['isComplete'])< $files = $data['data']; print_r($files); > if($data['hasErrors'])< $errors = $data['errors']; print_r($errors); >

  Fully documentation of class options and features.

  • limit Maximum Limit of files.
  • maxSize Maximum Size of files
  • extensions Whitelist for file extension.
  • required Minimum one file is required for upload
  • uploadDir Upload directory
  • title New file name
    • null Uploads with original file name
    • String Custom file name | use: auto, name, >, >, >, >, >, >, >
    • Array
      • String Custom file name | use: auto, name, >, >, >, >, >, >, >
      • Number Random name length
      • Boolean extra for plugin jQuery.filer
      • String $_POST field name containing json data with removed files names

      Questions or need help? You can ask it by writing us an Email or using StackOverflow site where you are most likely to get answer quickly. Make sure you add the tags «php», «php-upload» and «jquery.filer» when posting.

      If you run into an issue and need to report a bug or you just have a question, please create an Issue on GitHub issues and we will investigate it.

      jQuery.filer — Simple HTML5 File Uploader, a plugin tool for jQuery which change completely File Input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options.
      jQuery.filer

      About

      PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload files to webserver

      Источник