SummArg | Cursos y recursos para webmasters

10/07/2011

Uploader Drag & Drop con jQuery

Droparea es un plugin para el framework jQuery que facilita la creación de áreas para subir imágenes con HTML5 drag & drop. Trae incorporado el código PHP correspondiente para completar el proceso desde el lado del servidor. En el demo podemos arrastrar y soltar imágenes de nuestra computadora al área de pruebas para ver su funcionamiento.

Para ponerlo en funcionamiento en un proyecto primero debemos descargar los archivos y subirlos a nuestro servidor. Luego insertamos en el <head> de nuestro documento:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="droparea.js" type="text/javascript"></script>

En donde queramos establecer el área drag & drop insertamos:
<div id="areas">
<div class="droparea spot" data-width="460" data-height="345" data-type="jpg" data-crop="true" data-quality="60"></div>
<div class="droparea thumb" data-width="140" data-height="105" data-type="jpg" data-crop="true" data-quality="60"></div>
<div class="droparea thumb" data-width="140" data-height="105" data-type="jpg" data-crop="true" data-quality="40"></div>
<div class="droparea thumb" data-width="140" data-height="105" data-type="gif" data-crop="true"></div>
<div class="droparea thumb" data-width="140" data-name="image" data-value="face.png">
<img src="face.png" alt="face" />
</div>
<div class="droparea thumb" data-width="140" data-type="jpg" data-folder="sample"></div>
<div class="droparea thumb" data-width="140" data-type="jpg" data-something="stupid"></div>
</div>

Y activamos el plugin:
<script>// Calling jQuery "droparea" plugin
$('.droparea').droparea({
'post' : 'upload.php',
'init' : function(r){
//console.log('my init',r);
},
'start' : function(r){
//console.log('my start',r);
},
'error' : function(r){
//console.log('my error',r);
},
'complete' : function(r){
//console.log('my complete',r);
}
});
</script>

El toque final de estilo se realiza añadiendo al CSS:
.droparea {
position:relative;
text-align: center;
}
.droparea div {
position: absolute;
top:0;
width: 100%;
height: 100%;
}
.droparea .instructions {
border: 2px dashed #ddd;
opacity: .8;
}
.droparea .instructions.over {
border: 2px dashed #000;
background: #ffa;
}
.droparea .progress {
position:absolute;
bottom: 0;
width: 100%;
height: 0;
color: #fff;
background: #6b0;
}
#areas { width: 480px; }
.spot {
width: 460px;
height: 345px;
}
.thumb {
float: left;
margin:20px 20px 0 0;
width: 140px;
min-height: 105px;
}
.desc {
float:right;
width: 460px;
}
.signature a { color:#555; text-decoration:none; }
.signature img { margin-right:5px; vertical-align: middle; }

Demo y descarga

Dejar un comentario