HTM5 picture dropzone
How do I make an htm5 picture dropzone?
A quick picture dropzone with HTML5 drag & drop API and standard input type file.. What is a htm5 picture dropzone? How do you make a htm5 picture dropzone? This script and codes were developed by Jay Salvat on 13 July 2022, Wednesday.
HTM5 picture dropzone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTM5 picture dropzone</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--------
Drag a ong or pdf file from your desktop
and drop it on the dropzone.
It acts like a standard input type file when
the parent form is submitted.
If it doesn't work properly in the codepen window
please try the url below:
http://codepen.io/jaysalvat/full/agLyf
-----------
EDIT:
I end up developing a jQuery plugin...
You can fork it on Github:
https://github.com/jaysalvat/ezdz
Here is the quick demo:
http://codepen.io/jaysalvat/pen/agLyf
--------->
<div id="dropzone"> <div>dropzone</div> <input type="file" accept="image/png, application/pdf" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
HTM5 picture dropzone - Script Codes CSS Codes
body { background: #333;
}
#dropzone { position: relative; border: 10px dotted #FFF; border-radius: 20px; color: white; font: bold 24px/200px arial; height: 200px; margin: 30px auto; text-align: center; width: 200px;
}
#dropzone.hover { border: 10px solid #FE5; color: #FE5;
}
#dropzone.dropped { background: #222; border: 10px solid #444;
}
#dropzone div { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
#dropzone img { border-radius: 10px; vertical-align: middle; max-width: 95%; max-height: 95%;
}
#dropzone [type="file"] { cursor: pointer; position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0;
}
HTM5 picture dropzone - Script Codes JS Codes
$(function() { $('#dropzone').on('dragover', function() { $(this).addClass('hover'); }); $('#dropzone').on('dragleave', function() { $(this).removeClass('hover'); }); $('#dropzone input').on('change', function(e) { var file = this.files[0]; $('#dropzone').removeClass('hover'); if (this.accept && $.inArray(file.type, this.accept.split(/, ?/)) == -1) { return alert('File type not allowed.'); } $('#dropzone').addClass('dropped'); $('#dropzone img').remove(); if ((/^image\/(gif|png|jpeg)$/i).test(file.type)) { var reader = new FileReader(file); reader.readAsDataURL(file); reader.onload = function(e) { var data = e.target.result, $img = $('<img />').attr('src', data).fadeIn(); $('#dropzone div').html($img); }; } else { var ext = file.name.split('.').pop(); $('#dropzone div').html(ext); } });
});
![HTM5 picture dropzone - Script Codes](http://shots.codepen.io/jaysalvat/pen/agLyf-512.jpg)
Developer | Jay Salvat |
Username | jaysalvat |
Uploaded | July 13, 2022 |
Rating | 4.5 |
Size | 2,576 Kb |
Views | 97,152 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Ken Burns effect with Vegas 2 | 3,334 Kb |
Pure CSS Animated Clock | 3,140 Kb |
HTML5 Breakout | 4,873 Kb |
Apple watch like Mickey watch | 26,341 Kb |
Ezdz quick demo | 2,076 Kb |
Blobs test | 2,220 Kb |
Buzz - react 1 | 2,705 Kb |
3 state pure CSS animated 3D button | 3,255 Kb |
Easy Face Detection with jQuery | 63,612 Kb |
Mona Lisa with pure CSS | 51,446 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!