How to take photo from mobile camera and upload it using php ?
First we write front end code : -
<!DOCTYPE html>
<html>
<head>
<title>jQM input file capture</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<style>
#preview {
width: 80%; max-width: 300px;
}
#preview img {
width: 100%;
}
.hiddenfile {
width: 0px;
height: 0px;
overflow: hidden;
}
</style>
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<form id="account-form" action="/mobile/account" method="post" enctype="multipart/form-data" data-ajax="false">
<button id="chooseFile">Choose file</button>
<div class="hiddenfile">
<input type="file" id="image" data-clear-btn="false" name="image" accept="image/*" capture>
</div>
</form>
<div id="preview">
</div>
<ul id="info" data-role="listview" data-inset="true">
</ul>
</div>
</div>
<script>
$('#page').on('pageinit', function(){
$("#chooseFile").click(function(e){
e.preventDefault();
$("input[type=file]").trigger("click");
});
$("input[type=file]").change(function(){
var file = $("input[type=file]")[0].files[0];
$("#preview").empty();
displayAsImage3(file, "preview");
$info = $("#info");
$info.empty();
if (file && file.name) {
$info.append("<li>name:<span>" + file.name + "</span></li>");
}
if (file && file.type) {
$info.append("<li>size:<span>" + file.type + " bytes</span></li>");
}
if (file && file.size) {
$info.append("<li>size:<span>" + file.size + " bytes</span></li>");
}
if (file && file.lastModifiedDate) {
$info.append("<li>lastModifiedDate:<span>" + file.lastModifiedDate + " bytes</span></li>");
}
$info.listview("refresh");
sendPic();
});
});
function displayAsImage3(file, containerid) {
if (typeof FileReader !== "undefined") {
var container = document.getElementById(containerid),
img = document.createElement("img"),
reader;
container.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
}
var myInput = document.getElementById('image');
function sendPic() {
var file = myInput.files[0];
var formData = new FormData();
// Attach file
formData.append('screenshot', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'my_upd.php',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
success:function(response){
alert("ok");
}
});
}
myInput.addEventListener('change', sendPic, false);
</script>
</body>
</html>
After that create a php file with named "my_upd.php" and inside this file pase below code .
<?php
$target_dir = "upd/";
$file_name = $_FILES['screenshot']['name'];
$file_tmp = $_FILES['screenshot']['tmp_name'];
if (move_uploaded_file($file_tmp, $target_dir . $file_name)) {
echo "<h1>File Upload Success</h1>";
} else {
echo "<h1>File Upload not successfull</h1>";
}
?>
Comments
Post a Comment