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   -   3/5 (1 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 : 6x

Comments for Very simple drag and drop upload form

Johnf666     12/05/2016 09:17
You are my inspiration , I  have  few  web logs and  very sporadically  run out from to  brand. bceacfkgdbdf
Add a comment Nickname
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