IMAGE UPLOAD WITH JAVA WITH PHP CODE

Tuesday, 15 July 2014

IMAGE UPLOAD WITH JAVA WITH PHP CODE

------------------------------------------------------------------------------------------------------
CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE
IN THIS FOLDER

index.html
style.css
upload.js
upload.php

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

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

1. index.html

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

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Upload Your Images</h1>

<button type=submit id=btn>Upload Files!</button>

</form>

</ul>

</div>

</script>

</body>

</html>

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

2. style.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;

}

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

3. upload.js

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

(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);

}());

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

4. upload.php

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

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}

echo "<h2>Successfully Uploaded Images</h2>";

----------------------------------------------------------------------------------------------------------
IMAGE UPLOAD WITH JAVA
----------------------------------------------------------------------------------------------------------

<html>
<!-- http://jsfiddle.net/0GiS0/Yvgc2/ -->
<head>
<meta charset=UTF-8 />
<title>HTML5 File API</title>
<style type="text/css">
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article{
width: 80%;
margin:auto;
margin-top:10px;
}
#thumbnail{
height: 100px;
margin: 10px;    
}
</style>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js></script>
<script type='text/javascript'>
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img id='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div,null);            
});
//Read the image
picReader.readAsDataURL(file);
}                               
});
}
else
{
console.log("Your browser does not support File API");
}
}
</script> 
</head>
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<output id="result" />
</article>
</body>
</html>

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

Read More:

http://fbgadgets.blogspot.co.uk/2014/07/image-upload-with-java-without-php-code.html