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

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Very simple drag and drop upload form

Very simple drag and drop upload form

10/08/2015 by Dux   -   4.3/5 (4 ratings)

There are many solutions and scripts for drag and drop upload. Here is a very simple solution using the native drag and drop of the modern browsers type file input.
It is also compatible with browsers that do not support drag and drop as smartphone because it uses conventional HTML forms input.

Tested with Safari, Chrome, Firefox last versions

Demo.

Send a file

Drag and drop a file here

source code



 
<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>

Tested with Safari  Google Chrome  
Rate this code     |     Copied : 42x

Comments for Very simple drag and drop upload form

No comment
Add a comment Nickname   Site
ZOOM


Div following the scrolling of the page
Simple image gallery PHP
Javascript opacity
Infinite zoom CSS3 and Javascript
Zoom with CSS3
Adjust the rate of image colors
Dynamically add rows to a form. Complete solution
Make dir and upload files via FTP
Scroll div with javascript
Automatically adjust brightness contrast of an image