当前位置：首页 > article >正文

CSS优化file控件样式

article 2024/11/18 14:04:06

在这里插入图片描述

        <div class="file-box">
          <input type="button" class="btn" value="选择文件" />
          <input
            type="file"
            class="file"
            id="upimg"
            @change="previewFiles"
            multiple
          />
        </div>
  <!-- Vue就直接用@change="previewFiles"读取文件回调 --!>

// vue读取
function previewFiles(e){
	console.log(e.target.files)
}
 
// 原生监听
var upimg = document.getElementById('upimg');

upimg.addEventListener('change', function(e){
	        // 多文件
           console.log(e.target.files)
           // 单文件
           // console.log(e.target.files[0])
    }, false);

.btn,
.file {
   // display: block;
  position: absolute;
  width: 75px;
  height: 35px;
  color: #fff;
  border-radius: 4px;
  border-color: #409eff;
}

.btn {
  z-index: 2;
  background: #409eff;  /*  #66b1ff    409eff */
  pointer-events: none; /* 让事件传递到下一层,即: btn的层级比file高,但btn能触发file的事件 */
}
.file {
  z-index: 1;
}