Upload di Immagini con HTML5

La possibilità di caricare una immagine solo trascinandola dalla cartella del mio computer al browser e vedere che questa si carica nel tema di WordPress è stata per me una delle novità più interessanti del HTMl5. Quindi mi sono messo a studiarla

Dopo la solita ed istruttiva lettura di diversi articoli che ne parlano ho cercato di mettere insieme i pezzi e di fare la mia applicazione.

Qui c’è la DEMO

Dunque mi sono ispirato al materiale trovato in rete ed ho trovato questa libreria JQuery che si occupa della verifica e del caricamento dei vari file. Tale libreria si chiama jquery.filedrop.js e la potete scaricare QUI
Bene l’applicazione è così suddivisa

  • index.html
  • post_file.php
  • script.js
  • jquery.filedrop.js

Iniziamo con index.html in questo file inseriamo un link a jQuery: http://code.jquery.com/jquery-1.6.3.min.js molto importante se vogliamo che la nostra webapp funzioni.

Ho creato una struttura sintetica se vogliamo possiamo poi aggiungere tutti i tags html per personalizzare al meglio la nostra paginetta. Ora il file post_file.php

Ed ora il file script.js

<pre>
$(function(){

var dropbox = $(‘#dropbox’),
message = $(‘.message’, dropbox);

dropbox.filedrop({
// The name of the $_FILES entry:
paramname:’pic’,

maxfiles: 5,
maxfilesize: 2,
url: ‘post_file.php’,

uploadFinished:function(i,file,response){
$.data(file).addClass(‘done’);
// response is the JSON object that post_file.php returns
},

error: function(err, file) {
switch(err) {
case ‘BrowserNotSupported’:
showMessage(‘Your browser does not support HTML5 file uploads!’);
break;
case ‘TooManyFiles’:
alert(‘Too many files! Please select 5 at most! (configurable)’);
break;
case ‘FileTooLarge’:
alert(file.name+’ is too large! Please upload files up to 2mb (configurable).’);
break;
default:
break;
}
},

// Called before each upload is started
beforeEach: function(file){
if(!file.type.match(/^image\//)){
alert(‘Only images are allowed!’);

// Returning false will cause the
// file to be rejected
return false;
}
},

uploadStarted:function(i, file, len){
createImage(file);
},

progressUpdated: function(i, file, progress) {
$.data(file).find(‘.progress’).width(progress);
}

});

var template = ‘<div class=”preview”>’+
‘<span class=”imageHolder”>’+
‘<img />’+
‘<span class=”uploaded”></span>’+
‘</span>’+
‘<div class=”progressHolder”>’+
‘<div class=”progress”></div>’+
‘</div>’+
‘</div>’;

function createImage(file){

var preview = $(template),
image = $(‘img’, preview);

var reader = new FileReader();

image.width = 100;
image.height = 100;

reader.onload = function(e){

// e.target.result holds the DataURL which
// can be used as a source of the image:

image.attr(‘src’,e.target.result);
};

// Reading the file as a DataURL. When finished,
// this will trigger the onload function above:
reader.readAsDataURL(file);

message.hide();
preview.appendTo(dropbox);

// Associating a preview container
// with the file, using jQuery’s $.data():

$.data(file,preview);
}

function showMessage(msg){
message.html(msg);
}

});
</pre>

In fine andiamo a dare un po’ di stile al nostro lavoro
creiamo un file style.css

<pre>
/*————————-
Simple reset
————————–*/

*{
margin:0;
padding:0;
}

/*————————-
General Styles
————————–*/

html{
min-height:100%;
position:relative;

}

body{
color:#fff;
min-height:600px;
font:14px/1.3 ‘Segoe UI’,Arial, sans-serif;
}

a, a:visited {
text-decoration:none;
outline:none;
color:#54a6de;
}

a:hover{
text-decoration:underline;
}

/*————————-
Dropbox Element
————————–*/

#dropbox{
background:#efeeee;
border-radius:3px;
position: relative;
margin:80px auto 90px;
min-height: 290px;
overflow: hidden;
padding-bottom: 40px;
width: 990px;
border:5px dashed #ccc;
}

#dropbox .message{
font-size: 18px;
text-align: center;
padding-top:120px;
display: block;
color:#000;
}

#dropbox .message i{
color:#000;
font-size:15px;
}

#dropbox:before{
border-radius:3px 3px 0 0;
}

/*————————-
Image Previews
————————–*/

#dropbox .preview{
width:245px;
height: 215px;
float:left;
margin: 55px 0 0 60px;
position: relative;
text-align: center;
}

#dropbox .preview img{
max-width: 240px;
max-height:180px;
border:3px solid #fff;
display: block;

box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
display: inline-block;
position:relative;
}

#dropbox .uploaded{
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
background: url(‘img/done.png’) no-repeat center center rgba(255,255,255,0.5);
display: none;
}

#dropbox .preview.done .uploaded{
display: block;
}

/*————————-
Progress Bars
————————–*/
#dropbox .progressHolder{
position: absolute;
background-color:#252f38;
height:12px;
width:100%;
left:0;
bottom: 0;

box-shadow:0 0 2px #000;
}

#dropbox .progress{
background-color:#2586d0;
position: absolute;
height:100%;
left:0;
width:0;

box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

-moz-transition:0.25s;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}

#dropbox .preview.done .progress{
width:100% !important;
}

</pre>

Per vedere il risultato finito clicca alla QUI