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

标签 javascript php html ajax

我制作了一个用户个人资料卡,用户可以在其中单击选择文件来选择并上传图像。 enter image description here

一切正常,但我想更改它,而不是必须单击“选择文件”然后单击“上传”,用户只需单击现有图像并被带到选择图像屏幕: enter image description here

一旦他们选择了一张图片并按下打开,图片就会自动更改?

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

  <?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>

最佳答案

使用 <label> (使用 for 定位文件字段上的 id):

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

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

关于javascript - 单击现有的个人资料图片以上传和更改图像。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49238004/

相关文章:

javascript - 如何使用 nav.popTo() (ionic 2)?

c# - 在 asp.net 中的 javascript 中使用 c# 字符串属性

javascript - 如何发出错误以便可能在客户端的错误处理程序中捕获它?

php - 'events'的逐小时时间线显示 - mysql php

c# - HTML XPath 按类名搜索

html - 如何在 html 中设置与百分比 % 相等的宽度

javascript - 获取真实的内容大小

php - 在 PHP GD 中获取图像创建日期

javascript - 通过 onclick 事件调用 JavaScript 函数(带参数)

javascript - 将 'ondblclick' 事件添加到动态文本区域 JavaScript