时间戳

首页 > 解决方案 > 如何将文件上传按钮链接到翻转卡

html - 如何将文件上传按钮链接到翻转卡

问题描述

我目前在 index.html 中，并且我已将翻转卡添加为我的代码的个人资料照片我还包括一个文件上传器按钮，但我不知道如何将文件上传器按钮代码链接到翻转卡，以便一旦您选择它会自动显示在翻转卡上的图像我还向翻转卡添加了 CSS，但没有 CSS 到文件上传器按钮

我使用的翻转卡的网站：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

我用于文件上传按钮的网站：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button。

   //index.html

<--翻转卡片--> ``` 

               <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
  <div class="flip-card-inner">
     <div class="flip-card-front">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
      <div class="flip-card-back">                                 
      </div>
</div>
</div>
</body>
</html>

                <!--Flip card-->
                                
                                <!-- File uploader button-->
<html>
<body>

<form action="action_page.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

<--flip card-->
                          

      
                                <!-- File uploader button index.html -->


                    <html>
<body>

<form action="action_page.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>
                                <!-- index.html File uploader button-->

//PHP为文件上传按钮分离文件action_page.php

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

标签： htmlcss

解决方案

主页上的图像代码有效，但我可以看到您正在尝试根据 css 属性在文件上传按钮上实现翻转卡功能，即使您在按钮上添加翻转卡它也不会按预期工作，因为翻转卡将在悬停时显示图像类型并翻转按钮，您将无法上传文件。

试试这个

```
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
  <div class="flip-card-inner">
     <div class="flip-card-front">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
      <div class="flip-card-back">                                 </div>
</div>
</div>
</body>
</html>

                <!--Flip card-->
                                
                                <!-- File uploader button-->
<p>Click on the "Choose File" button to upload a file:</p>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>

推荐阅读