Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Форма загрузки файла на сайт
Данная форма делает кастомную кнопку <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>
.
Прокомментировать/Отблагодарить