HTM5 picture dropzone

Developer
Jay Salvat
Size
2,576 Kb
Views
97,152
  1. HTM5 picture dropzone Previews
  2. HTM5 picture dropzone HTML Codes
  3. HTM5 picture dropzone CSS Codes
  4. HTM5 picture dropzone JS Codes

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 Previews
IQ Test

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
HTM5 picture dropzone - Script Codes
Home Page Home
Developer Jay Salvat
Username jaysalvat
Uploaded July 13, 2022
Rating 4.5
Size 2,576 Kb
Views 97,152
Do you need developer help for HTM5 picture dropzone?

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!

Jay Salvat (jaysalvat) Script Codes
Name
Buzz - react 1
Ken Burns effect with Vegas 2
A Pen by Jay Salvat
Easy Face Detection with jQuery
HTML5 Breakout
Pure CSS Animated Clock
Ezdz quick demo
Buzz - react 2
Mona Lisa with pure CSS
3 state pure CSS animated 3D button
Create amazing Facebook ads with AI!

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!