单击现有的个人资料照片以上传和更改图像。

Question

我制作了一张用户个人资料卡，用户可以点击选择文件来选择并上传图片。

一切正常但是我想改变它而不必点击＆＃34;选择文件＆＃34;然后点击＆＃34;上传＆＃34;，用户只需点击现有图像即可进入选择图像屏幕：

一旦他们选择了图像并按下打开，图像会自动更改？

这是我显示用户个人资料卡的代码。

  <?php
        //query to see if the user has uploaded a profile picture.
        $sql = "SELECT * FROM user_image WHERE userid = ?";
        $stmt = mysqli_prepare($connect, $sql);
        mysqli_stmt_bind_param($stmt,"i",$_SESSION['userid']);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        $userImage = mysqli_fetch_assoc($result);
        mysqli_stmt_close($stmt);
    ?>   


  <h1>User's Profile</h1>
  <?php if($userImage['is_set'] == 0){
            echo '<img src="profile_pics/default-profile-pic.png"/>'; 
   }
        else{
            echo '<img src="'.$userImage['image_dir'].'"/>';
   }
   ?>
   <form action="upload.php" method="POST" enctype="multipart/form-data">
                    <input type="file" name="file" accept="image/*">
                    <button type="submit" name="submit">Upload</button>
   </form>

Answer 1

使用<label>（for定位文件字段中的id：

<label for="fileField"><img src="..."></label>

<input type="file" id="fileField" name="file" accept="image/*">

Answer 2

您可以使用附加文件输入的<label>标记来触发打开的框，也可以使用触发单击文件输入的图像上的单击处理程序。

document.querySelector('img').addEventListener('click', function(){
    document.querySelector('h1 + img').click();
});

要在选择时立即上传文件，您必须为图像输入附加更改事件处理程序。然后在其中提交表格。您必须将提交按钮名称更改为提交以外的其他名称才能使其生效。

document.querySelector('input[type=file]').addEventListener('change', function(){
    this.form.submit();
});

<button type="submit" name="upload">Upload</button>

Answer 3

<label for="fileField"><img src="..." height="100px" width="100px"></label>

<input type="file" id="fileField" name="file" accept="image/*" hidden="true">

使用hidden = "true"，您可以隐藏选择文件。

使用 img 标签内的 height 和 width 可以调整图片大小。