html upload file(image) in one click - php

Question

I'd like to upload a file in one click, so I tried to combine two click events in one, but the $_FILE variable does not load the image, here's my code :
<form target='_self' action='upload.php' method='post' enctype='multipart/form-data'>
<div class = 'testocentrato'>
<input style='display:none' type='file' accept='.jpg' name='file' id='file'/>
<input style='display:none' type='submit' id='caricaimmagine' name='caricaimmagine' />
<input class='inputfile' type='button' value='Scegli file da PC' onclick='document.getElementById('file').click(); document.getElementById('caricaimmagine').click();' />
<input style='display:none' type='submit' />
<input class='inputfile' type='submit' name='eliminaimmagine' onclick='document.getElementById('eliminaimmagine').click();' value='".$lang['TASTO_ELIMINA_FOTO']."' />
<input type='hidden' name='id_utente' value='".$user['id']."' />
</form>

Answer 1

It is possible to upload images with one click with ajax, check https://makitweb.com/how-to-upload-image-file-using-ajax-and-jquery/.
here is my html code I used the label tag so when I click the upload icon the select file windows will appear.
<form method="post" enctype="multipart/form-data">
<label class='foto' for="imgid">
<img id="photo" src="images/photo.png">
<p>Foto</p>
</label>
<input type="file" value="chosen File" id="imgid" name="img" accept="image/*">
<img class="previewimg" src="" width="100" height="100">
<span id="showImagePath" ></span>
<button class="btn btn-primary" id="toPost">Post</button>
</form>
mycss.
#imgid{
display:none;
}
.foto{
float:left;
}
.previewimg{
display:none;
background-color:grey;
}
#imgToPost{
display:none;
}
my Jquery:
I used setInterval() function to make my script run until the image is selected that way is going to be uploaded and the name and the image can be previewed.
$("#photo").click(function(){
setInterval(function(){
var fd = new FormData();
var files = $('#imgid')[0].files;
// Check file selected or not
if(files.length > 0 ){
$(".previewimg").show();
fd.append('file',files[0]);
$.ajax({
url: 'action.php?action=postcontentimage',
type: 'post',
data:fd,
contentType: false,
processData: false,
success: function(result){
var name ="";
if(result != 0){
$(".previewimg").attr("src", result).show();
for(var i=0; i < result.length;i++){
if(i>8){
name += result[i];
}
$("#showImagePath").html(name);
clearInterval();
}
}
}
})
}else{
alert("no image has been selected");
}
}, 2000);
})
my PHP:
<?php
if(isset($_FILES['file']['name'])){
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "uploads/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
$response = $location;
}
}
echo $response;
exit;
}else{
echo 0;
}
?>

Answer 2

Because you are directly clicking on submit before secting the file.
Remove
document.getElementById('caricaimmagine').click();
You need to click that button manually.