Обычно народ просто ставит
<input type="file" name="file" value="файлег">
Но это не по нашему! Выглядит стандартно, да и нет никакой валидации по типу файла, если мы, к примеру, хотим загружать только файлы определённого типа.
Итак, для начала давайте подумаем, что мы хотим:
- Реализовать в форме input типа file, принимающий только картинки
- Около input -а должна быть надпись с названием файла, который мы будем загружать после выбора оного в диалоговом окне
- Файл-картинку из этого input-а нужно загружать в инфоблок
- Предусмотреть обработку ошибки, когда физический размер картинки больше установленного в php.ini
Давайте для начала реализуем пункт 2.
Как это должно выглядеть в идеале:
Пример вёрстки: ТЫК
Листинг кода:
<!DOCTYPE html> <html> <head> <title>Пример к статье "Полезности о input -ах типа file в Битрикс"</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.12.0.min.js" type="text/javascript"></script> <style> body { font-family: "Helvetica Neue","Helvetica","Arial",sans-serif; font-size: 13px; } .file-block { display: table; } .file-div { background: transparent none repeat scroll 0 0; border: 2px solid #c2c2c2; border-radius: 5px; color: #555555; cursor: pointer; display: table-cell; font-size: 13px; height: 27px; outline: medium none; text-align: center; transition: all 0.3s ease 0s; vertical-align: middle; width: 125px; } .file-name { color: #dc112e; display: table-cell; font-size: 13px; height: 27px; text-align: right; vertical-align: middle; width: 125px; } .hidden { display: none; visibility: hidden; } </style> <script type="text/javascript"> //обработка нажатия кнопки "обзор" $( document ).ready(function() { var browse = document.getElementById("browse"); var browse_real = document.getElementById("browse-real"); browse.addEventListener("click", function(e) { browse_real.click(); e.preventDefault(); }, false); browse_real.addEventListener('change', function() { var val = browse_real.value; //в opera и chrome путь полный с косыми чертами - разделим на массив с разделителями "\" и отобразим последний элемент: var mas = val.split('\\') $('.file-name').html(mas[mas.length - 1]); }); }); </script> </head> <body> <div class="file-block"> <div class="file-div" id="browse">Обзор</div> <div class="file-name">Файл не выбран</div> <input type="file" id="browse-real" class="hidden" name="file"> </div> </body> </html>
Окей, выбор файла работает. А как теперь сделать ограничение на приём только картинок и пихать их в инфоблок?
Переходим к реализации пункта 1 и 3.
Нам нужна форма. Обернём наш инпут формой и добавим кнопку «Отправить»:
<form method="post" action="#" id="test-form"> <div class="file-block"> <div class="file-div" id="browse">Обзор</div> <div class="file-name">Файл не выбран</div> <input type="file" id="browse-real" class="hidden" name="file"> </div> <button id="sbm_btn" type="submit">Отправить</button> </form>
Напишем собственно саму отправку формы на AJAX:
$(document).on('click', '#sbm_btn', function (e) { e.preventDefault(); $.ajax( { url: '/ajax/test_form.php', type: 'POST', data: new FormData( $("#test-form")[0] ), processData: false, contentType: false, success: function(data) { if (data=='OK'){ // здесь ставим своё уведомление о том, что сообщение отправлено } if (data=='INVALID FILE SIZE'){ // здесь ставим своё уведомление о том, что превышен размер файла } if (data=='INVALID FILE TYPE'){ // здесь ставим своё уведомление о том, что не тот тип файла (не картинка) } } }); });
В /ajax/test_form.php и будет производится проверка файла на тип и если это картинка — она будет загружаться в инфоблок.
Листинг test_form.php:
<? require_once($_SERVER['DOCUMENT_ROOT'] . "/bitrix/modules/main/include/prolog_before.php"); ?> <? //проверяем размер файла if ($_FILES['file']['error']=='1'){ echo 'INVALID FILE SIZE'; die(); } // если есть вложение if (!empty($_FILES['file']['tmp_name'])) { //здесь проверяем расширение (картинка): if(strripos($_FILES['file']['type'], 'image')!==false){ // Закачиваем файл в /tmp_img $name = $_FILES['file']['name']; $uploads_dir = $_SERVER['DOCUMENT_ROOT'].'/tmp_img'; $is_moved = move_uploaded_file($_FILES['file']['tmp_name'], "$uploads_dir/$name"); if ($is_moved){ // если всё ок: // действия... CModule::IncludeModule("iblock"); $el = new CIBlockElement; $props = array(); $props['IBLOCK_ID'] = 10; // ID инфоблока $props['ACTIVE'] = 'Y'; $props['NAME'] = 'Картинка от '.date('d.m.Y H:i:s'); $props['ACTIVE_FROM'] = date('d.m.Y H:i:s'); $property_values = array(); //PHOTO $property_values['PHOTO'] = CFile::MakeFileArray($_SERVER["DOCUMENT_ROOT"]."/tmp_img/".$name); $props['PROPERTY_VALUES'] = $property_values; //добавляем элемент в инфоблок: if($new_el = $el->Add($props)){ echo 'OK'; } // удаляем темповый файл: unlink ($uploads_dir."/".$name); }else{ echo 'ERROR FILE MOVED'; } }else{ echo 'INVALID FILE TYPE'; } } ?>
Обратите внимание, что картинка будет загружаться в
$_SERVER['DOCUMENT_ROOT'].'/tmp_img
поэтому не забудьте создать эту папку и дать ей соответствующие права на запись.