How to style a file browse button

Este destul de simplu sa stilizezi un formular de comanda. Cu putine cunostinte CSS, este foarte usor sa dai aspect inputurilor si butoanelor, pana ajungi insa la butonul Browse, care nu arata niciodata asa cum ar trebui.

In acest tutorial va vom arata cum sa creati o functie de upload cu un buton stilizat.

De ce aveti nevoie ?

fisierul php cu codul php si html al formularului
fisierele jquery.js si script.js in folderul /js
fisierele reset.css si style.css in foderul /css
imaginile browse.jpg si remove.png in folderul /images
un folder /upload unde se vor uploada fisierele

Puteti face download la fisiere sursa aici.

Vezi aici pagina DEMO a formularului.

Ce trebuie sa faceti

Copiati fisierele jquery.js si script.js in folderul /js
Copiati imaginile browse.jpg si remove.png in folderul /images
Creati un folder nou si numiti-l upload
Copiati fisierul style.css in folderul css
Intr-un fisier php introduceti codul PHP si codul HTML

Codul PHP

<?php
// get files name and posted informations
if(count($_POST)>0) {

	// get posted information
	$title   = addslashes($_POST['title']);
	$text    = addslashes($_POST['text']);
	$select  = addslashes($_POST['select']);

	// settings for files
	/*
	@BEGIN - YOU CAN CHANGE THIS
	*/
	$settings = array(
		'upload_folder' => 'upload/',                             // set file folder
		'valid_ext'     => array('jpg','jpeg','gif','png','bmp'), // set valid extensions
		'max_file_size' => 1024                                   // 1 MB // set max file size in KB!
	);
	/*
	@END - YOU CAN CHANGE THIS
	*/

	// check if we have files
	if(isset($_FILES['file']) and count($_FILES['file'])>0) {

		// here we go 
		for ($i=0;$i<=count($_FILES['file']);$i++) {

			// get extension of the file
			$ext = strtolower(end(explode('.',$_FILES['file']['name'][$i])));

			// check if the extension is valid
			if(in_array($ext,$settings['valid_ext']) and $_FILES['file']['size'][$i]<=($settings['max_file_size']*1024)) {

				// generate a random name
				$name = rand(0,9999999999).'.'.$ext;

				// set file folder
				$folder = $settings['upload_folder'].$name;

				// upload file
				move_uploaded_file($_FILES['file']['tmp_name'][$i],$folder);

				// return new filename
				// $name = new file name, use it for your needs

			}

		}

	}

}
?>

In codul PHP puteti seta folderul in care sa se faca uploadul, extensiile care sunt acceptate, si dimensiunea maxima a fisierelor.

Codul HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Styled Browse Button</title>

	<!-- meta -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- css -->
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

	<!-- javascript -->
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/script.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

	<h1>Styled Browse Button</h1>

	<form action="index.php" method="post" enctype="multipart/form-data">
		<div class="block">

			<div class="line">
				<label>Title</label>
				<input type="text" name="title" />
			</div>

			<div class="line">
				<label>Text</label>
				<textarea name="text" rows="4"></textarea>
			</div>

			<div class="line">
				<label>Select</label>
				<select name="select">
					<option value="Option 1">Option 1</option>
					<option value="Option 2">Option 2</option>
					<option value="Option 3">Option 3</option>
					<option value="Option 4">Option 4</option>
				</select>
			</div>

			<div class="line">
				<label>File 1</label>
				<input type="file" name="file[]" class="styledbtn" />
				<div class="clear"></div>
			</div>

			<div class="line">
				<label>File 2</label>
				<input type="file" name="file[]" class="styledbtn" />
				<div class="clear"></div>
			</div>

			<div class="line">
				<label>File 3</label>
				<input type="file" name="file[]" class="styledbtn" />
				<div class="clear"></div>
			</div>

			<div class="line">
				<input type="submit" value="Send" class="submit" />
			</div>

			<div class="clear"></div>
		</div>
	</form>

</body>
</html>

Aveti la dispozitie codul html, cu formularul de contact. Inputurile de tip file, pe care le-am stilizat au clasa styledbtn.

<input type="file" name="file[]" class="styledbtn" />

Codul css in fisierul css/style.css

@import url("reset.css");

/*
General css
*/
body {
	font: 14px "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
	color: #000;
	background: #EDF3FA;
	margin: 0 auto;
	width: 600px;
}

h1 {
	margin: 10px 0;
	text-align: center;
	font: bold 15px Tahoma,Verdana,Arial;
}

.block {
	background: #fff;
	border: 1px solid #D0D0D0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 10px;
}

	.block .line {
		clear: both;
		margin-bottom: 5px;
	}
		.block .line label {
			display: block;
			float: left;
			width: 66px;
			line-height: 28px;
		}
		.block .line input, .block .line textarea, .block .line select {
			background: #EDF3FA;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			padding: 5px;
			border: 1px solid #C4DAF4;
			font: 14px "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
			width: 500px;
		}
		.block .line input.submit {
			width: auto !important;
			background: #A4DE7A;
			border: 1px solid #658B4B;
			cursor: pointer;
			float: right;
			margin: 5px 0 0;
		}
		.block .line select {
			width: 512px !important;
		}

	/*

	INPUT STYLE

	Copy this on your css

	*/
	.brwbutton_input {
		display: block;
		float: left;
		position: relative;
		width: 67px !important;
		height: 31px;
		overflow: hidden;
		background: transparent url(../images/browse.jpg) no-repeat scroll right center;
		margin-right: 3px;
	}
		.brwbutton_input input {
			display: block;
			position: absolute;
			right: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			height: 31px;
			width: auto !important;
		}
	.brwbutton_file {
		display: block;
		float: left;
		width: 250px;
		background: #EDF3FA;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 5px;
		border: 1px solid #C4DAF4;
		font: 14px "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
	}
		.brwbutton_file span {

		}
		.brwbutton_file a {
			display: block;
			float: right;
			width: 16px;
			height: 16px;
			background: transparent url(../images/remove.png) no-repeat scroll center center;
			text-indent: -9999px;
			cursor: pointer;
		}

Cu putine cunostinte CSS puteti stiliza butonul browse, puteti schimba imaginea din folderul images, dimensiunea si locatia din css.

Puteti stiliza si casuta cu numele fisierului, care apare dupa ce s-a produs uploadul.