Por questão de organização, será conveniente armazenar as
thumbnais e as imagens maiores em pastas separadas. A primeira coisa a se fazer então é criar os diretórios que usaremos durante todo o processo de upload.
Crie três pastas com os nomes: temp, thumbnails e large (que guardará as imagens de tamanho original). O diretório temp servirá de "ponte" para realizarmos todo o trabalho com as imagens. Depois crie o seguinte formulário, nomeando-o index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">
<title>::UPLOAD::</title>
<style type="text/css" media="all">
<!--
/* Formulário no estilo PHPBB*/
* {
/* Reset browsers default margin, padding and font sizes */
margin: 0;
padding: 0;
font-size: 100%;
}
body, div, p, th, td, li, dd {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small
}
html>body, html>div, html>p, html>th, html>td, html>li, html>dd {
font-size: small
}
html {
color: #536482;
background: #DBD7D1;
height: 100%;
margin-bottom: 1px;
}
body {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #536482;
background: #DBD7D1;
font-size: 62.5%;
margin: 10px 15px;
}
#tudo
{
width: 700px;
height: auto;
margin: 140px;
}
#content
{
width: 700px;
height: auto;
}
fieldset {
margin: 15px 0;
padding: 10px;
border-top: 1px solid #D7D7D7;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #D7D7D7;
background-color: #FFFFFF;
position: relative;
}
.rtl fieldset {
border-top: 1px solid #D7D7D7;
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
* html fieldset {
padding: 0 10px 5px 10px;
}
fieldset p {
font-size: 0.85em;
}
legend {
padding: 1px 0;
font-family: Tahoma,arial,Verdana,Sans-serif;
font-size: .9em;
font-weight: bold;
color: #115098;
margin-top: -.4em;
position: relative;
text-transform: none;
line-height: 1.2em;
top: 0;
vertical-align: middle;
}
/* Hide from macIE \*/
legend { top: -1.2em; }
/* end */
* html legend {
margin: 0 0 -10px -7px;
line-height: 1em;
font-size: .85em;
}
* html .rtl legend {
margin: 0;
margin-right: -7px;
}
input, textarea {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.90em;
font-weight: normal;
cursor: text;
vertical-align: middle;
padding: 2px;
color: #111111;
border-left: 1px solid #AFAEAA;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #D5D5C8;
border-bottom: 1px solid #D5D5C8;
background-color: #E3DFD8;
}
.rtl input, .rtl textarea {
border-left: 1px solid #D5D5C8;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #AFAEAA;
border-bottom: 1px solid #D5D5C8;
}
input:hover, textarea:hover {
border-left: 1px solid #AFAEAA;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #AFAEAA;
border-bottom: 1px solid #AFAEAA;
background-color: #E9E9E2;
}
input.langvalue, textarea.langvalue {
width: 90%;
}
label {
cursor: pointer;
font-size: 0.85em;
padding: 0 5px 0 0;
}
.rtl label {
padding: 0 0 0 5px;
}
label input {
font-size: 1.00em;
vertical-align: middle;
}
dl {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.00em;
}
dt {
float: left;
width: auto;
}
.rtl dt {
float: right;
}
dd { color: #666666;}
dd + dd { padding-top: 5px;}
dt span { padding: 0 5px 0 0;}
.rtl dt span { padding: 0 0 0 5px;}
dt .explain { font-style: italic;}
dt label {
font-size: 1.00em;
text-align: left;
font-weight: bold;
color: #4A5A73;
}
.rtl dt label {
text-align: right;
}
dd label {
font-size: 1.00em;
white-space: nowrap;
margin: 0 10px 0 0;
color: #4A5A73;
}
.rtl dd label {
margin: 0 0 0 10px;
}
html>body dd label input { vertical-align: text-bottom;}
dd input {
font-size: 1.00em;
max-width: 100%;
}
fieldset dl {
margin-bottom: 10px;
font-size: 0.85em;
}
fieldset dt {
width: 45%;
text-align: left;
border: none;
border-right: 1px solid #CCCCCC;
padding-top: 3px;
}
fieldset dd {
margin: 0 0 0 45%;
padding: 0 0 0 5px;
border: none;
border-left: 1px solid #CCCCCC;
vertical-align: top;
font-size: 1.00em;
}
fieldset dl:hover dt, fieldset dl:hover dd {
border-color: #666666;
}
fieldset dl:hover dt label {
color: #000000;
}
fieldset dl dd label:hover {
color: #BC2A4D;
}
input:focus, textarea:focus {
border: 1px solid #BC2A4D;
background-color: #E9E9E2;
color: #BC2A4D;
}
fieldset.submit-buttons {
text-align: center;
border: none;
background-color: transparent;
margin: 0;
padding: 4px;
margin-top: -1px;
}
p.submit-buttons {
text-align: center;
margin: 0;
padding: 4px;
margin-top: 10px;
}
fieldset.submit-buttons input, p.submit-buttons input {
padding: 3px 2px;
}
fieldset.submit-buttons legend {
display: none;
}
a.button1, input.button1, input.button3,
a.button2, input.button2 {
width: auto !important;
padding: 1px 3px 0 3px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #000;
font-size: 0.85em;
background: #EFEFEF;
cursor: pointer;
}
a.button1, input.button1 {
font-weight: bold;
border: 1px solid #666666;
}
a.button1:hover, input.button1:hover,
a.button2:hover, input.button2:hover {
border: 1px solid #BC2A4D;
background: #EFEFEF url("../images/bg_button.gif") repeat bottom;
color: #BC2A4D;
}
input.disabled {
font-weight: normal;
color: #666666;
}
-->
</style>
</head>
<body>
<div id="tudo">
<div id="content">
<form id="" method="post" action="./insert_image.php" enctype="multipart/form-data" onsubmit="submit.disabled = 'disabled';">
<fieldset>
<legend>Upload de Imagem</legend>
<dl>
<dt><label>Imagem</label><br />
<span class="explain">Indique o diretório onde se encontra a imagem.</span></dt>
<dd><input type="hidden" name="MAX_FILE_SIZE" value="10000000" /></dd>
<dd><input id="admin_pass1" type="file" size="25" maxlength="100" name="img" value=""/></dd>
</dl>
</fieldset>
<fieldset class="submit-buttons">
<input class="button1" type="submit" id="submit" onclick="this.className = 'button1 disabled';" name="submit" value="Start" /> </fieldset>
</form>
</form>
</div>
</div>
</body>
</html>
Faça o download do código acima
aqui.
Este é o formulário, na verdade não há muita necessidade de se criar um formulário tão estiloso para um artigo desta categoria. Por outro lado, é sempre bom levarmos em conta a estética e nos habituarmos a isso. O design de uma página, quando aliado a sua funcionalidade, pode fazer toda a diferença.