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 = "http://1.bp.blogspot.com/-T5d5lIP1Jn4/Uh07DfZ3nbI/AAAAAAAAPfg/Vjx32tqP9qc/s72-c/AddAutomaticRecentPostsSliderWithJQuery.png";
}
}
previewFile(); 
</script>
<input type="file" onchange="previewFile()"><br>
<img src="http://1.bp.blogspot.com/-T5d5lIP1Jn4/Uh07DfZ3nbI/AAAAAAAAPfg/Vjx32tqP9qc/s72-c/AddAutomaticRecentPostsSliderWithJQuery.png" height="200" alt="Image preview...">
<a href="http://1.bp.blogspot.com/-T5d5lIP1Jn4/Uh07DfZ3nbI/AAAAAAAAPfg/Vjx32tqP9qc/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(); 
</script>
----------------------------------------------------------------------------------------------------------
OR CHANGE ABOVE CODE WITH YELLOW LINES
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 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>
--------------------------------------------------------------------------------------------------------
<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(){
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]) {}
-----------------------------------------------------------------------------------------------------------
<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 
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  



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



<!-- 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 JAVASCRIPT

COPY 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






































Posted by

 on Tuesday 15 July 2014

at
08:48











Labels:
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,













0
comments:
        
















Post a Comment




















        

      







Subscribe to:
Post Comments (Atom)

















FB Gadgets | Template  Designed by Fatakat PhotosCoolBThemes.com




Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets