让用户能够点击图片并上传自己的图片

Question

我有一个由两个人组成的个人资料页面。我希望用户能够单击两个图像之一并将他们自己的图像上传到图像帧之一

  <div class="container">

      <div class="profile">

        <form action="testing.php" method="post">

          <textarea name="text2" rows="2" cols=0> Family Name</textarea><br>

        </form>

        <button class="btn profile-edit-btn">Edit Profile</button>

      </div>

      <!-- End of profile section -->

    </div>

    <!-- End of container -->

    </header>

    <main>

      <div class="container">

        <figure class="snip0056">

          <figcaption>

            <textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>

            <textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>

            </p>

          </figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()"  />

          <div class="position">

            <textarea name="text4" rows="1" cols=9>Proffession</textarea>

          </div>

          </h3>

        </figure>

        <figure class="snip0056 yellow">

          <figcaption>

            <textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>

             <textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>

          </figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />

          <div class="position">

           <textarea name="text4" rows="1" cols=9>Title</textarea>

        </figure>

        <div id="social">

          <a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>

          <a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>

          <a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>

        </div>

    </main>

Answer 1

使用标签并隐藏上传按钮<form id='form' method='post' action='/'>&nbsp; &nbsp; <label for='img1'>&nbsp; &nbsp; &nbsp; &nbsp; <input id='img1' type='file' style='display: none;' />&nbsp; &nbsp; &nbsp; &nbsp; <img id='img1_preview' src='' />&nbsp; &nbsp; </label>&nbsp; &nbsp; <input type='submit' value='Update' /></form>当你点击img，也就是点击label会自动触发输入文件，会弹出上传图片窗口，点击submit提交表单。最好使用 JS 捕获图像并使用 ajax 上传它，但响应速度会更快。

Answer 2

使用此代码选择图像并单击提交按钮，您需要使用您的 baground 处理它<form > &nbsp;<label for="myfile">Select a file:</label> &nbsp;<input type="file" id="myfile" name="myfile"><br><br> &nbsp;<input type="submit"> </form>