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>
<!-- https://stackoverflow.com/questions/29798342/javascript-code-for-remove-image/29798482 -->
</head>
<body>
<script>
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>
<input type="file" onchange="previewFile()"><br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7DrEap9-oYBkwVO2gMm9ZxtHPsIQ9-qzXRDlIq_luWxjby7NYQ7GdTwHiXRKBARo1Q1_BXMX7-L0DduMq3siZjVhNkVj7eD83TRqjehkY_rRBmxTlUfXARg2dQdLZWS4Gj5-HbwEGbVL/s72-c/AddAutomaticRecentPostsSliderWithJQuery.png" height="200" alt="Image preview...">
<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
----------------------------------------------------------------------------------------------------------
<!-- https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL -->
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
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();
previewFile();
</script>
----------------------------------------------------------------------------------------------------------
OR CHANGE ABOVE CODE WITH YELLOW LINES
or use:
reader.onloadend = function () {
or use:
reader.onloadend = function () {
----------------------------------------------------------------------------------------------------------
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
function previewFile(){
var file = document.querySelector('input').files[0];
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:
window.addEventListener('load', function() {document.querySelector('input[type="file"]').addEventListener('change', function() {if (this.files && this.files[0]) {var img = document.querySelector('img'); // $('img')[0] img.src = URL.createObjectURL(this.files[0]); // set src to file url img.onload = imageIsLoaded; // optional onload event listener } }); }); function imageIsLoaded(e) { alert(e); } <input type='file' /> <br><img id="myImg" src="#" alt="your image" height=200 width=100>
--------------------------------------------------------------------------------------------------------
SINGLE IMAGE UPLOAD JAVASCRIPT
for image height width
<br><img id="myImg" src="#" alt="your image" height=200 width=100>
--------------------------------------------------------------------------------------------------------
SINGLE IMAGE UPLOAD JAVASCRIPT
for image height width
<br><img id="myImg" src="#" alt="your image" height=200 width=100>
--------------------------------------------------------------------------------------------------------
<input type='file' />
<br><img id="myImg" src="smiley.gif">
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 IDif (this.files && this.files[0]) {}
-----------------------------------------------------------------------------------------------------------
<input type='file' />
<br><img src="smiley.gif">
<script>
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>
----------------------------------------------------------------------------------------------------------
<input type='file' />
<br><img src="smiley.gif">
<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
-----------------------------------------------------------------------------------------------------------
<input type='file' />
<br><img id="myImg" src="smiley.gif">
<script>
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 INPUT FILE BUTTON CHANGE INTO LINK
http://jsfiddle.net/dn9Sr/2/
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 UPLOAD1) EVENT TARGET PERAMETER USE FOR MULTI IMAGES
2) ARRAY USE
----------------------------------------------------------------------------------------------------------
<!-- https://www.html5rocks.com/en/tutorials/file/dndfiles/-->
<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>
<!-- JSCalculatorSimple.html -->
<!-- https://www.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html#zz-1.
--><html lang="en">
<head>
<meta charset="utf-8">
<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>
<form name="calcForm">
<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 JAVASCRIPTCOPY IMAGE ADDRESS SHOW BLOB URL
blob:https://www.w3schools.com/2ad91bbc-8305-445f-9d33-b11b3ff1c56d
--------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.codehim.com/demo/jquery-image-uploader-preview-and-delete/#howtouse -->
<head>
<link rel="stylesheet" href="dist/image-uploader.min.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Lato:300,700|Montserrat:300,400,500,600,700|Source+Code+Pro&display=swap"
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>
<header>
<div class="container">
<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>
<center>
<div style="margin: 4px 15px">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- onDemoPage -->
<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>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</center>
</header>
<main>
<div class="container">
<h4 id="example-1"><a href="#example-1"># Example 1
<small>- basic usage</small>
</a></h4>
<form method="POST" name="form-example-1" id="form-example-1" enctype="multipart/form-data">
<div class="input-field">
<input type="text" name="name-1" id="name-1">
<label for="name-1">Name</label>
</div>
<div class="input-field">
<input type="text" name="description-1" id="description-1">
<label for="description-1">Description</label>
</div>
<div class="input-field">
<label class="active">Photos</label>
<div class="input-images-1" style="padding-top: .5rem;"></div>
</div>
<button>Submit and display data</button>
</form>
<h4 id="example-2"><a href="#example-2"># Example 2
<small>- with options</small>
</a></h4>
<form method="POST" name="form-example-2" id="form-example-2" enctype="multipart/form-data">
<div class="input-field">
<input type="text" name="name-2" id="name-2" value="John Doe">
<label for="name-2" class="active">Name</label>
</div>
<div class="input-field">
<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>
<div class="input-field">
<label class="active">Photos</label>
<div class="input-images-2" style="padding-top: .5rem;"></div>
</div>
<button>Submit and display data</button>
</form>
</div>
<div id="show-submit-data" class="modal" style="visibility: hidden;">
<div class="content">
<h4>Submitted data:</h4>
<p id="display-name"><strong>Name:</strong> <span></span></p>
<p id="display-description"><strong>Description:</strong> <span></span></p>
<p><strong>Uploaded images:</strong></p>
<ul id="display-new-images"></ul>
<p><strong>Preloaded images:</strong></p>
<ul id="display-preloaded-images"></ul>
<a href="javascript:$('#show-submit-data').css('visibility', 'hidden')" class="close"><i
class="material-icons">close</i></a>
</div>
</div>
</main>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
/*! Image Uploader - v1.0.0 - 15/07/2019
* Copyright (c) 2019 Christian Bayer; Licensed MIT */
(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>', {
class: 'image-uploader'
}),
$input = $('<input>', {
type: 'file',
id: plugin.settings.imagesInputName + '-' + random(),
name: plugin.settings.imagesInputName + '[]',
multiple: ''
}).appendTo($container),
$uploadedContainer = $('<div>', {
class: 'uploaded'
}).appendTo($container),
$textContainer = $('<div>', {
class: 'upload-text'
}).appendTo($container),
$i = $('<i>', {
class: 'material-icons',
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>', {
class: 'uploaded-image'
}),
$img = $('<img>', {
src: src
}).appendTo($container),
$button = $('<button>', {
class: 'delete-image'
}).appendTo($container),
$i = $('<i>', {
class: 'material-icons',
text: 'clear'
}).appendTo($button);
if (plugin.settings.preloaded.length) {
$container.attr('data-preloaded', !0);
let $preloaded = $('<input>', {
type: 'hidden',
name: plugin.settings.preloadedInputName + '[]',
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>
<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>
--------------------------------------------------------------------------------------------------------------------
Read More:
http://fbgadgets.blogspot.co.uk/2014/07/image-upload-with-java-with-php-code.html
Related movie you might like to see :

Direct Link Generator CODE

Direct Links to your Files on Googl...

ON LINE JAVA LIBRARY

NEWS TICKER BLOGGER TEMPLATES

RELATED POST WIDGET LEFT TO RIGHT

RECAPTCHA KEY CONTCAT FORM FOR BLOG...

ONLINE ZIP OPNER

JAVA COLOR PICKER WITH

MAKE DLL FILE AND OPEN IN VISUAL BA...

SELL YOUR APPS

SSL WEBSITE CHECKER FOR FACEBOOK

Platinum Arts Sandbox Free 3D Game ...

BASIC TEXT OR SCROLL BOX OR IMAGE S...

BOOTSNIPP LOGIN SIGNUP FORM

BLOGGER INCLUDABLE SECTION

SHOPPING CART IN SIDEBAR TEMPLATE

SHOPPING CART IN SIDEBAR TEMPLATE

SHOPPING CART BLOGGER TEMPLATE PAR...

FREE SLL CERFICATE BY AZURE MICROSO...

FEATURE POST WIDGET IN BLOG
?
+
X
Recommended for you
Loading..
Related Post for IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
UnityAssetsExplorer Read More: https://yadi.sk/d/pQCvUUC02D3aY …
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE BUTTON WITHOUT VARIABLE COD…
Sprite Sheet Animation ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
WEBSITE TRANSLATOR AND THUMBNAIL Read More: http://www.worldlingo.com/en/products/instant_website_translator.html http://www.makeathumbnail.com/thumbnail.php http://www.sciweavers.org/free-online-web-to-im…
FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffe…
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
DINO PAIRS MATCHING GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.u…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.