Ajax Loader
×
HTML 
<form id="form_upload_imagens" enctype="multipart/form-data" action="" method="post">
1
<form id="form_upload_imagens" enctype="multipart/form-data" action="" method="post">
2
    <div style="padding: 10px;">
3
      <label for="nome_album"><b>Nome do álbum</b></label><br />
4
        <input type="text" name="nome_album" />
5
        <a id="botao_falso_upload">Adicionar foto <span>+</span></a>
6
        <input id="botao_real_upload" type="file" name="imagens_album[]" multiple />
7
      <span class="limite_upload">A dimensão da imagem deve ser no<br /> máximo 1024px por 768px e 3mb.</span>
8
    </div>
9
</form>
10
 
11
<div id="retorno_upload_imagens">
12
<!-- -->
13
<figure>
14
    <img style="background: url(http://placehold.it/220/) center center no-repeat;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" src="An accurate description of the image!" />
15
  <figcaption><input id="" type="text" placeholder="Escreva uma descrição" /></figcaption>
16
</figure>
17
<!-- -->
18
</div>
19
 
20
<div id="bloco_politica_upload">
21
  <input type="radio" name="aceitou_politica" value="" />Estou ciente da <a href="#">Política de Upload</a> e me responsabilizo pelas imagens aqui disponibilizadas.
22
</div>
23
<div id="bloco_botao_salvar">
24
  <a id="botao_salvar_upload">Criar álbum de fotos</a><br /><br /><br />
25
  <a id="cancelar" href="#">Cancelar</a>
26
</div>
27
 
28
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
body {
1
body {
2
  background-color: #E7E7E5;
3
  font: 13px Arial;
4
}
5
 
6
#form_upload_imagens {
7
  margin-bottom: 25px;
8
}
9
 
10
#form_upload_imagens input[type="text"] {
11
 border: solid 1px transparent;
12
 margin-top: 10px;
13
 padding: 10px;
14
 width: 198px;
15
 -webkit-border-radius: 3px;
16
 -moz-border-radius: 3px;
17
 border-radius: 3px;
18
 width: 290px;
19
}
20
 
21
#form_upload_imagens input[type="file"] {
22
  display: none;
23
}
24
 
25
#form_upload_imagens a {
26
  position: relative;
27
  padding: 10px 65px 10px 50px;
28
  font-size: 13px;
29
  font-weight: bold;
30
  background-color: #92C8B8;
31
  border: none;
32
  border-bottom: 2px #7CAA9D solid;
33
  color: #FFF;
34
  -webkit-border-radius: 3px;
35
  -moz-border-radius: 3px;
36
  border-radius: 3px;
37
  cursor: pointer;
38
}
39
 
40
#form_upload_imagens a span {
41
  position: absolute;
42
  top: 4px;
43
  right: 45px;
44
  font-size: 25px;
45
}
46
#form_upload_imagens .limite_upload {
47
  width: 210px;
48
  display: inline-block;
49
  vertical-align: bottom;
50
  margin-left: 25px;
51
  color: #999999;
52
  padding-bottom: 3px;
53
}
54
 
55
#retorno_upload_imagens figure {
56
  display:inline-block;
57
  width:220px;
58
  /*border:1px solid #ccc;*/
59
  margin:10px;
60
}
61
 
62
#retorno_upload_imagens figure img {
63
  width: 220px;
64
  height: 220px;
65
  margin: 0;
66
}
67
 
68
#retorno_upload_imagens figure figcaption {
69
  font-family:arial;
70
  font-size:12px;
71
  text-align:left;
72
  margin: 0 0 2px 0;
73
  padding: 8px 0;
74
  font-style:italic;
75
}
76
 
77
#retorno_upload_imagens figure figcaption input {
78
  border: solid 1px transparent;
79
  padding: 10px;
80
  width: 198px;
81
  -webkit-border-radius: 3px;
82
  -moz-border-radius: 3px;
83
  border-radius: 3px;
84
}
85
 
86
#bloco_politica_upload {
87
  margin:30px 10px 45px;
88
  color: #999999;
89
}
90
 
91
#bloco_politica_upload input[type='radio'] {
92
        -moz-border-radius: 8px;
93
        -webkit-border-radius: 8px;
94
        border-radius: 8px;
95
        margin-top: 0;
96
        border: solid 3px #FFFFFF;
97
        background-color: #d3b0b6;
98
        width: 15px;
99
        height: 15px;
100
    }
101
#bloco_politica_upload input[type='radio']:checked {
102
        border: solid 3px #b38b95;
103
    }
104
  
105
#bloco_politica_upload input[type='radio']:after {
106
        background: #b38b95;
107
        width: 5px;
108
        height: 5px;
109
        -moz-border-radius: 4px;
110
        -webkit-border-radius: 4px;
111
        border-radius: 4px;
112
        margin-left: -3px;
113
        margin-top: -3px;
114
    }
115
 
116
#bloco_botao_salvar {
117
  text-align: center;
118
}
119
 
120
#bloco_botao_salvar #cancelar {
121
  text-decoration: underline;
122
  color: #999999;
123
}
124
 
125
#bloco_botao_salvar #botao_salvar_upload {
126
  padding: 10px 30px;
127
  font-size: 14px;
128
  font-weight: bold;
129
  background-color: #92C8B8;
130
  border: none;
131
  border-bottom: 2px #7CAA9D solid;
132
  color: #FFF;
133
  -webkit-border-radius: 3px;
134
  -moz-border-radius: 3px;
135
  border-radius: 3px;
136
  cursor: pointer;
137
}
138
 
 
JavaScript 
$(document).ready(function() {
1
$(document).ready(function() {
2
  $('#botao_falso_upload').on('click', function(evento){
3
    evento.preventDefault();
4
    $('#botao_real_upload').trigger('click');
5
  });
6
});
 

Untitled

CSSDeck G+