AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Форма загрузки файла на сайт

Данная форма делает кастомную кнопку <input type="file"> и показывает область сброса, которую вы можете обработать.

или перетащите их сюда
Файл объемом не более 32 МБ в форматах jpeg, jpg, png, gif. Для выбора нескольких изображений удерживайте клавишу Ctrl

Чтобы форма могла отправлять файлы задано: 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>

<h1>Форма загрузки файла на сайт</h1>

<p>Данная форма делает кастомную кнопку &lt;input type="file"&gt; и показывает область сброса, которую вы можете обработать.</p>
<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">Файл объемом не&nbsp;более <?=($ImageMaxSize/1000)?>&nbsp;МБ&nbsp;в&nbsp;форматах
		jpeg, jpg, png, gif. Для выбора нескольких изображений удерживайте клавишу Ctrl
	</div>
</form>


.

© Copyright 2008-2019 by KDG



Rambler's Top100