html - 如何使用引导程序或 css 在按钮后的输入中设置文件上传设计

Question

在这里，我正在实现文件上传的功能，但是当进入 UI 部分时，默认文件上传就像

<input type="file" name="data">

这就像默认文件上传：

我想要这样的事情

所需文件上传：

在这里我不想应用任何 j 查询或 java 脚本只要 html,css,bootstrap 如果需要可以吗？

标签： htmltwitter-bootstrapcss

Answer 1

使用此代码

// highlight drag area 
var fileinput = document.querySelector('.file-input');
var filedroparea = document.querySelector('.file-drop-area');
var jssetnumber = document.querySelector('.js-set-number');
fileinput.addEventListener('dragenter', isactive);
fileinput.addEventListener('focus', isactive);
fileinput.addEventListener('click', isactive);

// back to normal state
fileinput.addEventListener('dragleave', isactive);
fileinput.addEventListener('blur', isactive);
fileinput.addEventListener('drop', isactive);

// add Class
function isactive() {
  filedroparea.classList.add('is-active');
}

// change inner text
fileinput.addEventListener('change', function() {
  var count = fileinput.files.length;
  if (count === 1) {
    // if single file then show file name
    jssetnumber.innerText = fileinput.value.split('\\').pop();
  } else {
    // otherwise show number of files
    jssetnumber.innerText = count + ' files selected';
  }
});

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
  background-color: #37385F;
  color: #D7D7EF;
  font-family: 'Lato', sans-serif;
}

h2 {
  text-align: center;
  margin: 50px 0;
}

.file-drop-area {
  border: 1px dashed #7c7db3;
  border-radius: 3px;
  position: relative;
  width: 450px;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 20px 30px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.file-drop-area.is-active {
  background-color: #3F4069;
}

.fake-btn {
  background-color: #3F4069;
  border: 1px solid #9E9EC4;
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-msg {
  font-size: small;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: calc(100% - 130px);
  vertical-align: middle;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.file-input:focus {
  outline: none;
}

<h2>Styling Native File Input</h2> 

<div class="file-drop-area">
  <span class="fake-btn">Choose files</span>
  <span class="file-msg js-set-number">or drag and drop files here</span>
  <input class="file-input" type="file" multiple>
</div>