Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Formulaire upload glissé déposé très simple

Formulaire upload glissé déposé très simple

10/08/2015 par Dux   -   3/5 (1 notes)

Il existe beaucoup de solutions et scripts de formulaire d'upload en glissé déposé. Voici une solution extrêmement simple utilisant le drag and drop des boutons des navigateurs modernes.
Il est compatible aussi avec les navigateurs ne supportant pas le drag and drop comme sur smartphone car il utilise les input classiques des formulaires HTML.

Testé Safari, Chrome, Firefox last versions

Demo.

Send a file

Drag and drop a file here

code source



 
<style type="text/css">
       .
zoneupload { position: relative; width: 300px; background: Aquamarine; border: 5px solid coral; padding: 10px; }
       .
zoneupload legend { color: white; font-size: 2em; background: coral }
       .
zoneupload .fichier { height: 160px; width: 300px; border: none; -webkit-appearance: none; background: white url(upload.png) center center no-repeat;  }
       .
zoneupload small { position: absolute; margin: -20px 0 0 10px }
       .
zoneupload #activite { color: blue }
       
.zoneupload #send { position: absolute; right: 2px; bottom: 2px }
</style>


<!--
VERY SIMPLE FORM  -->
<
fieldset class="zoneupload">
       <
legend>Send a file</legend>
       <
form method="post" action="upload.php" name="upload" id="upload" enctype="multipart/form-data">
               <
input type="hidden" name="post" value="file">
               <
input type="file" name="fichier" id="fichier" class="fichier">
               <
input type="submit" value="Send" id="send">
               <
br>
               <
small>Drag and drop a file here</small>
               <
span id="activite"></span>
       </
form>
</
fieldset>


<!--
JAVASCRIPT FOR COLOR CHANGE AND AUTO SUBMIT -->
<
script type="text/javascript">
       
// Auto send file when input val change
       
$("#upload").change(function() {
               $(
'#activite').text('Upload in progress...');
               
document.getElementById("send").click();
       });
       
// Drag and drop color change
       
$(document).on('dragover', '#fichier', function(e) {
               
e.preventDefault();
               $(
this).css('background-color', 'deeppink');
       });
       $(
document).on('dragleave', '#fichier', function(e) {
               $(
this).css('background-color', 'white');
       });
       $(
document).on('drop', '#fichier', function(e) {
               $(
'#activite').html('Upload en cours...');
               $(
this).css('background-color', 'blue');
       });
</script>

Testé avec Safari  Google Chrome  
Noter ce code     |     Copié : 6x

Commentaires pour Formulaire upload glissé déposé très simple

Johnf666     12/05/2016 09:17
You are my inspiration , I  have  few  web logs and  very sporadically  run out from to  brand. bceacfkgdbdf
Ajouter un commentaire Pseudo
ZOOM