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 :
GOOGLE FILTER BUTTON IN IMAGE SEARC...
CSS SLIDER WITHOUT JS
FLICKITY SLIDER SCROLL WITH RADIO N...
FLICKITY JS CSS SLIDER
CONVERT FILE PATH TO A URL LINK
Make Own API English Dictionary
JS IMAGE SCROLLER
QUICK FIND TOOL GOOGLE CHROME FOR ...
WEB DEVELOPER 0.5
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
BOOLEAN MATCHING GAME JAVASCRIPT
GET BUTTON ID AFTER CLICK IN JAVA S...
JAVA SCRIPT LOOP
QUIZY MEMORY CARD GAME
CTX STYLE
IMAGE SRC ARRAY IN JAVA SCRIPT
QUIZ ACTIVITY MAKER
MEMORY GAME WITH UPPER HIDDEN CARD
Related Post for IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
DROP DOWN MENU EXAMPLES
BLOCK JAVA SCRIPT BY GOOGLE CHROME
SCREEN TO GIF
Bread Crumb Navigation Menu Guardian Style
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
CSS SLIDER WITHOUT JS
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
JS IMAGE SCROLLER
AUTO CSS JS SLIDER WITH ARROW BULLET
NOTEPAD++ REMOVE UNWANTED LINES
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
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.