IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE

Tuesday, 15 July 2014

IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE

------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE
--------------------------------------------------------------------------------------------------------

<html>
<head>
<meta charset=UTF-8 />
<title>HTML5 File API</title>

<style type="text/css">
body {
font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
padding:10px;
}
h1 {
margin-top:0;
}
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>
</script>

</head>
<body>
<div id=main>
<h1>Upload Your Images</h1>
<form method=post enctype=multipart/form-data action=upload.php>
<input type=file name=images id=images multiple />
<button type=submit id=btn>Upload Files!</button>
</form>
<div id=response></div>
<ul id=image-list>
</ul>
</div>

<script type='text/javascript'>
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
</script>

</body>
</html>

----------------------------------------------------------------------------------------------------------
SIMPLE IMAGE UPLOAD WITH JAVA SCRIPT
FILE READER EXAMPLE
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
https://stackoverflow.com/questions/29798342/javascript-code-for-remove-image/29798482
-----------------------------------------------------------------------------------------------------------

<html>

<head>

<TITLE>Quelques WordsArray</TITLE>

</head>

<body>

function previewFile(){

var preview = document.querySelector('img');

var file = document.querySelector('input[type=file]').files[0];

var reader = new FileReader();

reader.onloadend = function () {

preview.src = reader.result;

}

if (file) {

reader.readAsDataURL(file);

}

else {

preview.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7DrEap9-oYBkwVO2gMm9ZxtHPsIQ9-qzXRDlIq_luWxjby7NYQ7GdTwHiXRKBARo1Q1_BXMX7-L0DduMq3siZjVhNkVj7eD83TRqjehkY_rRBmxTlUfXARg2dQdLZWS4Gj5-HbwEGbVL/s72-c/AddAutomaticRecentPostsSliderWithJQuery.png";

}

previewFile();

</script>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7DrEap9-oYBkwVO2gMm9ZxtHPsIQ9-qzXRDlIq_luWxjby7NYQ7GdTwHiXRKBARo1Q1_BXMX7-L0DduMq3siZjVhNkVj7eD83TRqjehkY_rRBmxTlUfXARg2dQdLZWS4Gj5-HbwEGbVL/s72-c/AddAutomaticRecentPostsSliderWithJQuery.png">remove image </a>

</body>

</html>

----------------------------------------------------------------------------------------------------------

WINDOW LOAD IMAGE

----------------------------------------------------------------------------------------------------------

function previewFile() {

var reader = new FileReader();

reader.addEventListener("load",FunctionName,true);

function FunctionName(){

document.querySelector('img').src = reader.result;
var myWindow = window.open(reader.result, "_self");

}

if(document.querySelector('input[type=file]').files[0]) {

reader.readAsDataURL(document.querySelector('input[type=file]').files[0]);

}

}
previewFile();

</script>

----------------------------------------------------------------------------------------------------------

OR CHANGE ABOVE CODE WITH YELLOW LINES
or use:
reader.onloadend = function () {

----------------------------------------------------------------------------------------------------------

function previewFile(){
var file = document.querySelector('input').files[0];

var reader = new FileReader();

reader.addEventListener("load",FunctionName,true);

function FunctionName(){

document.querySelector('img').src = reader.result;

var myWindow = window.open(reader.result, "_self");

}

if(file){
reader.readAsDataURL(file);
}

}

previewFile();

</script>

----------------------------------------------------------------------------------------------------------

MULTI IMAGE UPLOAD JAVASCRIPT

READ MORE:

https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html/22369599

--------------------------------------------------------------------------------------------------------
SINGLE IMAGE UPLOAD JAVASCRIPT
for image height width
<br><img id="myImg" src="#" alt="your image" height=200 width=100>
--------------------------------------------------------------------------------------------------------

window.onclick = function() {

document.querySelector('input[type="file"]').addEventListener("change",FN2,true);

function FN2(){

if (this.files && this.files[0]) {

var img = document.querySelector('img');

img.src = URL.createObjectURL(this.files[0]);

img.onload = imageIsLoaded;

}

};

</script>

-----------------------------------------------------------------------------------------------------------

OR USE ABOVE CODE WITHOUT IF STATMENT AND MY IMG ID
if (this.files && this.files[0]) {}

-----------------------------------------------------------------------------------------------------------

window.onclick = function() {

var file = document.querySelector('input').files[0];

var reader = new FileReader();

reader.addEventListener("load",FN2,true);

function FN2(){

document.querySelector('img').src = reader.result;

}

reader.readAsDataURL(file);

}

</script>

----------------------------------------------------------------------------------------------------------

window.onclick = function() {

document.querySelector('input').addEventListener("change",FN2,true);

function FN2(){

var img = document.querySelector('img');

img.src = URL.createObjectURL(this.files[0]);

img.onload = imageIsLoaded;

};

</script>

-----------------------------------------------------------------------------------------------------------

OR USE ABOVE CODE WITHOUT IF STATMENT WITH MY IMG ID

-----------------------------------------------------------------------------------------------------------

window.onclick = function(){

document.querySelector('input[type="file"]').addEventListener("change",FN2,true);

function FN2(){

myImg.src = URL.createObjectURL(this.files[0]);

};

</script>

------------------------------------------------------------------------
INPUT FILE BUTTON CHANGE INTO LINK
http://jsfiddle.net/dn9Sr/2/

SINGLE IMAGE UPLOAD
WHEN WE CLICK INPUT TYPE FILE THEN IMAGE ID UPLOAD NEW IMAGE
WE GET BLOB IMAGE URL LINK
WE GET BLOB CSS LINK
blob:https://www.w3schools.com/a9175725-815a-4989-b59d-26b3012ca112
blob:https://www.w3schools.com/72e19efe-dd6b-4378-80e1-c44503766b1e
ADD CANVAS TEXT ON IMAGE
https://www.google.com/search?q=canvas+text+on+image&rlz=1C1CHBF_enGB882GB882&oq=CANVAS+TEXT+ON+IMAGE&aqs=chrome.0.0l7j69i61.8536j0j4&sourceid=chrome&ie=UTF-8
https://stackoverflow.com/questions/8429011/how-to-write-text-on-top-of-image-in-html5-canvas

<div class="canvas-text-editor" tabindex="0">
<canvas></canvas>
<textarea></textarea>
</div>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "darth-vader.jpg";
};
----------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------

<input type='file' />
<br><img id="ImageId" src="smiley.gif">
<script>
document.querySelector('input[type="file"]').addEventListener("change",FN2,true);
function FN2(){
ImageId.src = URL.createObjectURL(this.files[0]);
};
</script>

------------------------------------------------------------------------

INPUT BOX CHANGE INTO INNER HTML

------------------------------------------------------------------------

<style>
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<div class="container">
<span class="centered">Centered</span>
<div class="one_opacity_0">
<input type="file">
</div>
<br><img id="ImageId" src="smiley.gif"style="width:300px;height:300px;">
</div>
<script>
document.querySelector('input[type="file"]').addEventListener("change",FN2,true);
function FN2(){
ImageId.src = URL.createObjectURL(this.files[0]);
};
</script>

-------------------------------------------------------------------------

------------------------------------------------------------------------

INPUT BOX CHANGE INTO INNER HTML AND CENTRE TEXT BUT IT NOT WORK

------------------------------------------------------------------------

<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<div class="container">
<span class="centered">Centered</span>
<div class="one_opacity_0">
<input type="file">
</div>
<br><img id="ImageId" src="smiley.gif"style="width:300px;height:300px;">
</div>
<script>
document.querySelector('input[type="file"]').addEventListener("change",FN2,true);
function FN2(){
ImageId.src = URL.createObjectURL(this.files[0]);
};
</script>

-------------------------------------------------------------------------

IN LINE JAVA SCRIPT CODE UPLOAD WITH INPUT BUTTON ON IMAGE

<img id="blah" alt="your image" width="100" height="100" />
<input type="file" 
onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])

-------------------------------------------------------------------------

<html>
<!-- https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/4459419 -->
<head>
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container .btn {
position: absolute;

width:300px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .btn:hover {
background-color: black;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<br><img id="ImageId" src="https://www.w3schools.com/howto/img_snow.jpg"style="width:300px;height:300px;">
<div class="one_opacity_0">
<input class="btn" type="file" 
onchange="document.getElementById('ImageId').src = window.URL.createObjectURL(this.files[0])">
</div>
</div>
</body>
</html>

------------------------------------------------------------------------------------------

🅼🅰🅺🅴 🅰🅱🅾🆅🅴 🅲🅾🅳🅴 🅸🅽 🆂🅷🅾🆁🆃 🆆🅰🆈

1)MAKE IMAGE BUTTON CONTAINER WITH ABSOLUTE POSITION

2)UNDER ABSOLUTE POSITION CONTAINER MAKE BUTTON RELATIVE POSITION

3)ADD OPACITY VALUE ZERO TO MAKE INVISIBLE BUTTON

4)BUTTON SIZE EQUAL TO IMAGE FOR EASY CLICK INPUT BUTTON

ADD CANVAS TEXT ON IMAGE

https://stackoverflow.com/questions/41116851/how-to-add-text-on-image-using-javascript-and-canvas

http://fbgadgets.blogspot.com/2017/10/mouse-over-mouse-out-in-java-script.html
<img src="smiley.gif" id="ImageId">
<button id="ButtonId">DELETE</button>
<script>
ButtonId.onclick=function(){
ImageId.src="";
};
</script>

------------------------------------------------------------------------------------------

<html>
<!-- https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/4459419 -->
<head>
<style>
.container{
position:relative;
width:100%;
max-width:400px;
}
#MakeInputButtonInVisibleSizeEqualToimage{
width:300px;
height:300px;
position:absolute;
top:53%;
left:38%;
transform:translate(-50%,-50%);
opacity:0;
}
</style>
</head>
<body>
<div class="container">
<br><img id="ImageId" src="https://www.w3schools.com/howto/img_snow.jpg"style="width:300px;height:300px;">
<input id="MakeInputButtonInVisibleSizeEqualToimage" type="file" 
onchange="document.getElementById('ImageId').src = window.URL.createObjectURL(this.files[0])">
</div>
</body>
</html>

------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

SELECT MULTI IMAGE AND MULTI IMAGE UPLOAD
1) EVENT TARGET PERAMETER USE FOR MULTI IMAGES
2) ARRAY USE

----------------------------------------------------------------------------------------------------------

<style>
#ImageId{
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
document.querySelector('input[type="file"]').addEventListener('change', FN2, false);
function FN2(event) {
var files = event.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function(theFile){
return function(event) {
var span = document.createElement('span');
span.innerHTML = ['<img id="ImageId" src="', event.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
}(f);
reader.readAsDataURL(f);
}
}
</script>

--------------------------------------------------------------------------------------------------------
simple java script calculator
https://www.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html#zz-1.
--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<!-- https://www.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html#zz-1.

--><html lang="en">

<head>

<title>Simple JavaScript Calculator</title>

<style>

input {

font-family: consola, monospace;

color: blue;

}

td {

margin-left: auto;

margin-right: auto;

text-align: center;

}

table {

border: thick solid;

}

</style>

</head>

<body>

<h2>Simple JavaScript Calculator</h2>

<table>

<tr>

<td colspan="4"><input type="text" name="display"

style="text-align:right"></td>

</tr>

<tr>

<td><input type="button" name="btn1" value="1"

onclick="calcForm.display.value += '1'"></td>

<td><input type="button" name="btn2" value="2"

onclick="calcForm.display.value += '2'"></td>

<td><input type="button" name="btn3" value="3"

onclick="calcForm.display.value += '3'"></td>

<td><input type="button" name="btnAdd" value="+"

onclick="calcForm.display.value += ' + '"></td>

</tr>

<tr>

<td><input type="button" name="btn4" value="4"

onclick="calcForm.display.value += '4'"></td>

<td><input type="button" name="btn5" value="5"

onclick="calcForm.display.value += '5'"></td>

<td><input type="button" name="btn6" value="6"

onclick="calcForm.display.value += '6'"></td>

<td><input type="button" name="btnSub" value="-"

onclick="calcForm.display.value += ' - '"></td>

</tr>

<tr>

<td><input type="button" name="btn7" value="7"

onclick="calcForm.display.value += '7'"></td>

<td><input type="button" name="btn8" value="8"

onclick="calcForm.display.value += '8'"></td>

<td><input type="button" name="btn9" value="9"

onclick="calcForm.display.value += '9'"></td>

<td><input type="button" name="btnMul" value="x"

onclick="calcForm.display.value += ' * '"></td>

</tr>

<tr>

<td><input type="button" name="btnClear"

value="C" onclick="calcForm.display.value = ''"></td>

<td><input type="button" name="btn0" value="0"

onclick="calcForm.display.value += '0'"></td>

<td><input type="button" name="btnEqual" value="="

onclick="calcForm.display.value = eval(calcForm.display.value)"></td>

<td><input type="button" name="btnDiv" value="/"

onclick="calcForm.display.value += ' / '"></td>

</tr>

</table>

</form>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

MULTI IMAGES UPLOAD WITH CLOSE BUTTON JAVASCRIPT
COPY IMAGE ADDRESS SHOW BLOB URL
blob:https://www.w3schools.com/2ad91bbc-8305-445f-9d33-b11b3ff1c56d

--------------------------------------------------------------------------------------------------------------------

<html>

<head>

rel="stylesheet">

<style>

* {

margin: 0;

padding: 0;

font-weight: normal;

}

body {

font-family: 'Lato', sans-serif;

font-size: 16px;

font-weight: 300;

color: rgba(0, 0, 0, 0.9);

line-height: 1.5;

}

header {

background-color: rgba(0, 0, 0, 0.9);

color: rgb(255, 255, 255);

padding: 1rem;

}

header p {

font-family: 'Montserrat', sans-serif;

font-size: 1.2em;

font-weight: 200;

margin-bottom: 4rem;

}

main {

text-align: justify;

position: relative;

margin: 4rem 0;

}

footer {

background-color: rgba(0, 0, 0, 0.9);

color: rgb(255, 255, 255);

padding: 1rem 0;

margin-top: 4rem;

}

footer p {

text-align: center;

font-family: 'Montserrat', sans-serif;

font-size: 1em;

font-weight: 200;

margin: 0;

}

a {

color: #50ce7d;

text-decoration: none;

}

h1,

h4,

h6 {

font-family: 'Montserrat', sans-serif;

font-weight: 600;

}

h1 {

font-size: 3.6em;

margin: 4rem 0 1rem 0;

}

h4 {

font-size: 2em;

margin: 3rem 0 1rem 0;

}

h6 {

font-size: 1.2em;

margin: 1rem 0;

}

h4 small {

font-size: 70%;

font-weight: 300;

}

p {

margin: 1rem 0;

}

nav {

position: absolute;

margin-left: -12em;

}

nav ul {

margin-left: 0;

list-style: none;

}

nav ul li {

padding: .2rem 0;

}

nav ul li a {

font-size: 1.2em;

font-weight: 400;

font-family: 'Montserrat', sans-serif;

color: #2196f3;

}

pre {

font-family: 'Source Code Pro', monospace;

margin: 1rem 0;

padding: 1rem 1rem;

background: #f3f3f3;

font-size: .9em;

overflow-x: scroll;

}

table code,

p code {

font-family: 'Source Code Pro', monospace;

background: #f3f3f3;

font-size: .9em;

padding: .1rem .3rem;

}

strong {

font-weight: 600;

}

form > button {

-webkit-appearance: none;

cursor: pointer;

font-family: 'Montserrat', sans-serif;

font-weight: 600;

padding: 1rem 2rem;

border: none;

background-color: #50ce7d;

color: #fff;

text-transform: uppercase;

display: block;

margin: 2rem 0 2rem auto;

font-size: 1em;

}

ul {

margin-left: 2rem;

}

input {

background-color: transparent;

border: none;

border-radius: 0;

outline: none;

width: 100%;

line-height: normal;

font-size: 1em;

padding: 0;

-webkit-box-shadow: none;

box-shadow: none;

-webkit-box-sizing: content-box;

box-sizing: content-box;

margin: 0;

color: rgba(0, 0, 0, 0.72);

background-position: center bottom, center calc(100% - 1px);

background-repeat: no-repeat;

background-size: 0 2px, 100% 1px;

-webkit-transition: background 0s ease-out 0s;

-o-transition: background 0s ease-out 0s;

transition: background 0s ease-out 0s;

background-image: -webkit-gradient(linear, left top, left bottom, from(#2196f3), to(#2196f3)), -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));

background-image: -webkit-linear-gradient(#2196f3, #2196f3), -webkit-linear-gradient(#d9d9d9, #d9d9d9);

background-image: -o-linear-gradient(#2196f3, #2196f3), -o-linear-gradient(#d9d9d9, #d9d9d9);

background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d9d9d9, #d9d9d9);

height: 2.4em;

}

input:focus {

background-size: 100% 2px, 100% 1px;

outline: 0 none;

-webkit-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

border-bottom: none;

-webkit-box-shadow: none;

box-shadow: none;

}

.input-field label {

width: 100%;

color: #9e9e9e;

position: absolute;

top: 0;

left: 0;

height: 100%;

font-size: 1em;

cursor: text;

-webkit-transition: -webkit-transform .2s ease-out;

transition: -webkit-transform .2s ease-out;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

text-align: initial;

-webkit-transform: translateY(7px);

transform: translateY(7px);

pointer-events: none;

}

input:focus + label {

color: #2196f3;

}

.input-field {

position: relative;

margin-top: 2.2rem;

}

.input-field label.active {

-webkit-transform: translateY(-15px) scale(0.8);

transform: translateY(-15px) scale(0.8);

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

}

.container {

width: 60%;

max-width: 1200px;

margin: 0 auto;

position: relative;

}

.step {

font-size: 1.6em;

font-weight: 600;

margin-right: .5rem;

}

.option {

margin-top: 2rem;

border-bottom: 1px solid #d9d9d9;

}

.modal {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0, 0, 0, .5);

display: flex;

align-items: center;

justify-content: center;

}

.modal .content {

background: #fff;

display: inline-block;

padding: 2rem;

position: relative;

}

.modal .content h4 {

margin-top: 0;

}

.modal .content a.close {

position: absolute;

top: 1rem;

right: 1rem;

color: inherit;

}

::-webkit-scrollbar {

width: 10px;

height: 10px;

}

::-webkit-scrollbar-track {

background: transparent;

}

::-webkit-scrollbar-thumb {

background: #888;

}

::-webkit-scrollbar-thumb:hover {

background: #555;

}

@media screen and (max-width: 1366px) {

body {

font-size: 15px;

}

nav ul li a {

font-size: 1.1em;

}

@media screen and (max-width: 992px) {

main {

margin: 2rem 0;

}

nav {

margin-left: -10em;

}

@media screen and (max-width: 786px) {

body {

font-size: 14px;

}

nav {

display: none;

}

.container {

width: 80%;

}

@media screen and (max-width: 450px) {

.container {

width: 90%;

}

</style>

</head>

<body>

<h1>Image-Uploader</h1>

<p>Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, withot

AJAX.</p>

</div>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-7089100907045419"

data-ad-slot="8749784419"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

</center>

</header>

<main>

<h4 id="example-1"><a href="#example-1"># Example 1

<small>- basic usage</small>

</a></h4>

</div>

<label for="description-1">Description</label>

</div>

<label class="active">Photos</label>

</div>

<button>Submit and display data</button>

</form>

<h4 id="example-2"><a href="#example-2"># Example 2

<small>- with options</small>

</a></h4>

</div>

<input type="text" name="description-2" id="description-2"

value="This form is already filed with some data, including images!">

<label for="description-2" class="active">Description</label>

</div>

<label class="active">Photos</label>

</div>

<button>Submit and display data</button>

</form>

</div>

<h4>Submitted data:</h4>

<p id="display-description"><strong>Description:</strong> <span></span></p>

<p><strong>Uploaded images:</strong></p>

<p><strong>Preloaded images:</strong></p>

<a href="javascript:$('#show-submit-data').css('visibility', 'hidden')" class="close"><i

class="material-icons">close</i></a>

</div>

</main>

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

/*! Image Uploader - v1.0.0 - 15/07/2019

(function($) {

$.fn.imageUploader = function(options) {

let defaults = {

preloaded: [],

imagesInputName: 'images',

preloadedInputName: 'preloaded',

label: 'Drag & Drop files here or click to browse'

};

let plugin = this;

plugin.settings = {};

plugin.init = function() {

plugin.settings = $.extend(plugin.settings, defaults, options);

plugin.each(function(i, wrapper) {

let $container = createContainer();

$(wrapper).append($container);

$container.on("dragover", fileDragHover.bind($container));

$container.on("dragleave", fileDragHover.bind($container));

$container.on("drop", fileSelectHandler.bind($container));

if (plugin.settings.preloaded.length) {

$container.addClass('has-files');

let $uploadedContainer = $container.find('.uploaded');

for (let i = 0; i < plugin.settings.preloaded.length; i++) {

$uploadedContainer.append(createImg(plugin.settings.preloaded[i].src, plugin.settings.preloaded[i].id, !0))

}

})

};

let dataTransfer = new DataTransfer();

let createContainer = function() {

let $container = $('<div>', {

}),

$input = $('<input>', {

type: 'file',

id: plugin.settings.imagesInputName + '-' + random(),

multiple: ''

}).appendTo($container),

$uploadedContainer = $('<div>', {

}).appendTo($container),

$textContainer = $('<div>', {

}).appendTo($container),

$i = $('<i>', {

text: 'cloud_upload'

}).appendTo($textContainer),

$span = $('<span>', {

text: plugin.settings.label

}).appendTo($textContainer);

$container.on('click', function(e) {

prevent(e);

$input.trigger('click')

});

$input.on("click", function(e) {

e.stopPropagation()

});

$input.on('change', fileSelectHandler.bind($container));

return $container

};

let prevent = function(e) {

e.preventDefault();

e.stopPropagation()

};

let createImg = function(src, id) {

let $container = $('<div>', {

}),

$img = $('<img>', {

src: src

}).appendTo($container),

$button = $('<button>', {

}).appendTo($container),

$i = $('<i>', {

text: 'clear'

}).appendTo($button);

if (plugin.settings.preloaded.length) {

$container.attr('data-preloaded', !0);

let $preloaded = $('<input>', {

type: 'hidden',

value: id

}).appendTo($container)

} else {

$container.attr('data-index', id)

}

$container.on("click", function(e) {

prevent(e)

});

$button.on("click", function(e) {

prevent(e);

if ($container.data('index')) {

let index = parseInt($container.data('index'));

$container.find('.uploaded-image[data-index]').each(function(i, cont) {

if (i > index) {

$(cont).attr('data-index', i - 1)

}

});

dataTransfer.items.remove(index)

}

$container.remove();

if (!$container.find('.uploaded-image').length) {

$container.removeClass('has-files')

}

});

return $container

};

let fileDragHover = function(e) {

prevent(e);

if (e.type === "dragover") {

$(this).addClass('drag-over')

} else {

$(this).removeClass('drag-over')

}

};

let fileSelectHandler = function(e) {

prevent(e);

let $container = $(this);

$container.removeClass('drag-over');

let files = e.target.files || e.originalEvent.dataTransfer.files;

setPreview($container, files)

};

let setPreview = function($container, files) {

$container.addClass('has-files');

let $uploadedContainer = $container.find('.uploaded'),

$input = $container.find('input[type="file"]');

$(files).each(function(i, file) {

dataTransfer.items.add(file);

$uploadedContainer.append(createImg(URL.createObjectURL(file), dataTransfer.items.length - 1))

});

$input.prop('files', dataTransfer.files)

};

let random = function() {

return Date.now() + Math.floor((Math.random() * 100) + 1)

};

this.init();

return this

}

}(jQuery))

</script>

$(function () {

$('.input-images-1').imageUploader();

let preloaded = [

{id: 1, src: 'https://picsum.photos/500/500?random=1'},

{id: 2, src: 'https://picsum.photos/500/500?random=2'},

{id: 3, src: 'https://picsum.photos/500/500?random=3'},

];

$('.input-images-2').imageUploader({

preloaded: preloaded,

imagesInputName: 'photos',

preloadedInputName: 'old'

});

$('form').on('submit', function (event) {

// Stop propagation

event.preventDefault();

event.stopPropagation();

// Get some vars

let $form = $(this),

$modal = $('.modal');

// Set name and description

$modal.find('#display-name span').text($form.find('input[id^="name"]').val());

$modal.find('#display-description span').text($form.find('input[id^="description"]').val());

// Get the input file

let $inputImages = $form.find('input[name^="images"]');

if (!$inputImages.length) {

$inputImages = $form.find('input[name^="photos"]')

}

// Get the new files names

let $fileNames = $('<ul>');

for (let file of $inputImages.prop('files')) {

$('<li>', {text: file.name}).appendTo($fileNames);

}

// Set the new files names

$modal.find('#display-new-images').html($fileNames.html());

// Get the preloaded inputs

let $inputPreloaded = $form.find('input[name^="old"]');

if ($inputPreloaded.length) {

// Get the ids

let $preloadedIds = $('<ul>');

for (let iP of $inputPreloaded) {

$('<li>', {text: '#' + iP.value}).appendTo($preloadedIds);

}

// Show the preloadede info and set the list of ids

$modal.find('#display-preloaded-images').show().html($preloadedIds.html());

} else {

// Hide the preloaded info

$modal.find('#display-preloaded-images').hide();

}

// Show the modal

$modal.css('visibility', 'visible');

});

// Input and label handler

$('input').on('focus', function () {

$(this).parent().find('label').addClass('active')

}).on('blur', function () {

if ($(this).val() == '') {

$(this).parent().find('label').removeClass('active');

}

});

// Sticky menu

let $nav = $('nav'),

$header = $('header'),

offset = 4 * parseFloat($('body').css('font-size')),

scrollTop = $(this).scrollTop();

// Initial verification

setNav();

// Bind scroll

$(window).on('scroll', function () {

scrollTop = $(this).scrollTop();

// Update nav

setNav();

});

function setNav() {

if (scrollTop > $header.outerHeight()) {

$nav.css({position: 'fixed', 'top': offset});

} else {

$nav.css({position: '', 'top': ''});

}

});

</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

FbGadgets

Tuesday, 15 July 2014