html upload file(image) in one click

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.