Форма загрузки файла на сайт
Данная форма делает кастомную кнопку <input type="file"> и показывает область сброса, которую вы можете обработать.
Чтобы форма могла отправлять файлы задано: method="post" и enctype="multipart/form-data".
Поддерживается мультизагрузка для этого у input указано: name="img[]" и multiple.
Для ограничения загрузки только картинок используется: accept="image/*".
Максимально допустимый размер загружаемого файла получается из системных настроек сервера: upload_max_filesize и post_max_size.
Скрипты для обработки загрузки файла можно посмотреть здесь.
Исходный код этого примера:
<style type="text/css">
.Attach__container {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
min-height: 66px;
overflow: hidden;
border: 1px dashed #9299a2;
border-radius: 6px;
color: #9299a2;
cursor: default;
}
.Attach__container > DIV{
margin: 2px auto 0;
width: 100%;
text-align: center;
font-size: 17px;
line-height: 24px;
}
.Attach__container > div > label {
color: #74a3c7;
cursor: pointer;
}
.Attach__container > input {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
.Attach__container_after {
font-size: 13px;
margin-top: 4px;
color: #666;
}
</style>
<form action="/api.php" method="post" enctype="multipart/form-data"
ondragenter="return _fl.drop(event);"
ondragover="return _fl.drop(event);"
ondragleave="return _fl.drop(event);"
ondrop="return _fl.drop(event);">
<?php
$ImageMaxSize=min(intval(str_replace('M','000',ini_get('upload_max_filesize'))), intval(str_replace('M','000',ini_get('post_max_size')))); // в Kb
?>
<input name="MAX_FILE_SIZE" type="hidden" value="<?=$ImageMaxSize?>000">
<div class="Attach__container">
<div>
<label for="attach">Выберите файлы</label> <nobr>или перетащите их сюда</nobr>
</div>
<input id="attach" type="file" name="img[]" multiple accept="image/*" onchange="_fl.change(event)">
</div>
<div class="Attach__container_after">Файл объемом не более <?=($ImageMaxSize/1000)?> МБ в форматах
jpeg, jpg, png, gif. Для выбора нескольких изображений удерживайте клавишу Ctrl
</div>
</form>
.
Прокомментировать/Отблагодарить