用css alpha 滤镜 实现input file 样式美化代码

使用CSS3的alpha滤镜可以让我们修改input type=file元素的样式，从而实现input file样式美化。下面是实现的步骤：

使用CSS3的alpha滤镜可以让我们修改input type="file"元素的样式，从而实现input file样式美化。下面是实现的步骤：

第一步：创建一个input元素

首先需要在HTML代码中添加一个input元素，type属性设置为“file”，例如：

<input type="file" id="uploadFile" name="uploadFile" />

第二步：修改样式

在CSS中可以对input file元素的样式进行修改，例如：

/* 隐藏默认样式 */
input[type="file"] {
  display: none;
}

/* 添加自定义样式 */
.btn-upload {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border-radius: 3px;
  cursor: pointer;
}

/* 鼠标悬浮样式 */
.btn-upload:hover {
  opacity: 0.8;
}

其中，display: none;可以隐藏默认的input file样式，而.btn-upload是一个自定义的样式，用来美化input file的样式。可以添加自己喜欢的样式属性。

第三步：添加事件处理

在点击input file元素时，会触发一个文件选择的弹窗，我们需要在这个弹窗关闭时获取选择的文件并进行处理。因此需要添加一个change事件处理函数：

document.getElementById('uploadFile').onchange = function() {
  var fileName = this.value.split("\\").pop();
  document.getElementById('fileName').innerHTML = fileName;
};

该函数会在input file的value改变时触发，获取选中的文件名，并将其显示在页面上。

示例1

以下示例代码演示如何将默认的input file样式隐藏，并用一个带有按钮样式的元素来代替：

<label for="uploadFile" class="btn-upload">
  <span>上传文件</span>
  <input type="file" id="uploadFile" name="uploadFile">
</label>
<span id="fileName"></span>

input[type="file"] {
  display: none;
}

.btn-upload {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border-radius: 3px;
  cursor: pointer;
}

.btn-upload:hover {
  opacity: 0.8;
}

document.getElementById('uploadFile').onchange = function() {
  var fileName = this.value.split("\\").pop();
  document.getElementById('fileName').innerHTML = fileName;
};

示例2

以下示例代码演示如何给input file添加一张图片，将input file隐藏，并用一个带有图片样式的元素来代替：

<label for="uploadFile" class="img-upload">
  <img src="upload.png" alt=""> 
  <input type="file" id="uploadFile" name="uploadFile" />
</label>
<span id="fileName"></span>

input[type="file"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.img-upload {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}

.img-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-upload:before {
  content: "上传照片";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #999;
}

.img-upload:hover:before {
  opacity: 0.8;
}

.img-upload:before,
.img-upload:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-upload:after {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.img-upload:hover:after {
  opacity: 1;
}

document.getElementById('uploadFile').onchange = function(e) {
  var file = e.target.files[0];
  if (file.type.indexOf("image/") == 0) {
    var reader = new FileReader();
    reader.onload = function(ev) {
      document.querySelector('.img-upload').style.backgroundImage = 'url(' + ev.target.result + ')';
    };
    reader.readAsDataURL(file);
  }
};

以上是两个示例代码，可以根据自己的需求修改样式和事件处理，打造出更符合自己网站风格的input file美化样式。