Question

我有这个表单用于发送多个文件，我试图隐藏浏览按钮并保留文本和周围区域仍然可以点击，也可以通过在鼠标结束时更改框的颜色来获得适当的光标在按钮上。有人可以帮我改进吗？ CSS对我来说经常是一个问题，我也无法获得相同高度的两个绿色画布。

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Upload Multiple Files with Progress Bar</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="status"></div>

  <!-- multiple file upload form -->
  <form action="24.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" id="files" class="button">
    <input type="submit" value="Upload" class="button">
  </form>

  <!-- progress bar -->
  <div class="progress">
    <div class="bar">&nbsp;</div >
    <div class="percent">0%</div >
  </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

PHP

<?php 

$max_size = round(disk_free_space("/var/www") / 2);
$extensions = array('1080.mp4','720.mp4','360.mp4','180.mp4');
$dir = 'new/';
$count = 0;

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
{
  // loop all files
  foreach ( $_FILES['files']['name'] as $i => $name )
  {
    // if file not uploaded then skip it
    if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
      continue;

      // skip large files
    if ( $_FILES['files']['size'][$i] >= $max_size )
      continue;

    // skip unprotected files
    if( !in_array($name, $extensions) )
      continue;

    // now we can move uploaded files
      if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )
        $count++;
  }

  echo json_encode(array('count' => $count));

}

?>

CSS

body,
html {
margin: 0;
padding: 0;
height: 100vh;
background-color: #000000;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.upload-btn-wrapper input[type=submit] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.container {
  background: #000000;
  border: 1px solid #4FB522;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  margin: 10px auto;
  padding: 10px 0;
  text-align: center;
  color: #4FB522;
  width: 600px;
}
.status {
  background: #000000;
  color: #4FB522;
  display: none;
  margin: 8px 0;
  padding: 5px;
  border: 1px solid #4FB522;
 font-family: "Geneva";
position: relative;
  overflow: hidden;
}

.progress {
  margin: 10px auto;
  position: relative;
  width: 90%;
}

.bar {
  background: #4FB522;
  height: 20px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: 1px solid #000000;
  transition: width 0.3s ease 0s;
  width: 0;
 font-family: "Geneva";
}

.percent {
  color: #466D35;
  left: 48%;
  position: absolute;
  top: 0;
 font-family: "Geneva";
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

.button {
    background-color: #4FB522; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
margin: 5px 0;
}

Answer 1

您可以使用自定义样式创建新按钮。给它定位：绝对属性并覆盖自定义上传按钮。之后，您可以将点击功能附加到触发上传按钮的新按钮

css：隐藏输入文件按钮

1 个答案: