I want to create a web application with a feature to take pictures from the front camera with html tag such as
- html
<form id="data" method="post" enctype="multipart/form-data">
<input type="file" capture="camera" accept="image/*" class="btn btn-primary"
id="takePhoto" name="takePhoto" />
<input type="submit" id="submit" name="submit" class="btn btn-primary" value="Upload!" />
</form>
- Javascript
<script>
$(document).ready(function(){
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url:'https://example.com/proccess.php',
crossDomain: true,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
- php
….
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST, REQUEST');
$folderPath = "uploads/";
$tdate = date('d_m_Y_h_i_s');
$allowed_ext = array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'rar', 'zip', 'jpg', 'jpeg', 'png');
$file_name = $_FILES["takePhoto"]["name"];
$file_temp = $_FILES["takePhoto"]["tmp_name"];
$sourceProperties = getimagesize($file_temp);
$fileNewName = $tdate;
$ext = pathinfo($_FILES["takePhoto"]["name"], PATHINFO_EXTENSION);
$getname = explode(".", $file_name);
$ori_file = substr(str_replace(str_split('\/:*#?"<>|&+-;.()'), '_', $getname[0]),0);
$ori_file = str_replace(" ","_",$ori_file);
$file_name_exp = explode(".", $file_name);
$file_ext = strtolower(array_pop($file_name_exp));
= strtolower(end(explode('.', $file_name)));
$file_size = $_FILES["takePhoto"]['size'];
$file_name_up = $ori_file.'_'.$tdate.'.'.$file_ext;
if(in_array($file_ext, $allowed_ext) === true){
$local = 'uploads/'.$file_name_up;
if (move_uploaded_file($file_tmp,$local)) {
echo "The file ". basename( $file_name_up) . " has been uploaded.<br>";
if(rename($local, "/mnt/drive/server/uploads/".basename( $file_name_up))) {
echo "File moving operation success<br/>";
}
} else {
echo "";
}
}else{
echo '<div class="error">ERROR: Extentions not available!</div>';
}
…
If using the smartphone’s rear camera, the image can be saved, but if using the front camera, the image cannot be saved perfectly, whether because of the resolution or other things.