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>
<html lang=en>
<head>
<meta charset=UTF-8 />
<title>HTML5 File API</title>
<link rel=stylesheet href=style.css />
</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 src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>
</script>
<script src=upload.js></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
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment