Question

我正在使用带引导程序的MVC 5。如何设计输入类型文件元素，如下图所示。

＆＃13;

.file-uploader .input-group input, .file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
    padding: 2px 15px;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    color: #337ab7;
    text-align: center;
    background-color: #fff;
    border: 1px solid #d6d9e2;
    border-radius: 0;
}

＆＃13;

<div class="form-group">
                                                        <label for="exampleInputEmail1">Logo image</label>
                                                        <div class="form-group file-uploader">
                                                            <input type="file" name="img[]" class="file">
                                                            <div class="input-group col-xs-12">
                                                                <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
                                                                <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
                                                                <span class="input-group-btn">
                                                                    <button class="browse btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i>Browse</button> 
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>

＆＃13;

请帮帮我......

Answer 1

.file-uploader .input-group input,
.file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
  padding: 2px 15px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  color: #337ab7;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d6d9e2;
  border-radius: 0;
}
.file
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width:100%;
  height:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="form-group">
  <label for="exampleInputEmail1">IMG</label>
  <div class="form-group file-uploader">
    
    <div class="input-group col-xs-12">
      <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
      <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
      <span class="input-group-btn">
                                                                    <div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" name="img[]" class="file"></div> 
                                                                </span>
    </div>
  </div>
</div>

Answer 2

我使用了几行JS来提高效果。尝试一下。

{
  "data": {
    "values": [
      {"A": 2,"B": 3,"C": 4,"D": "a"},
      {"A": 1,"B": 2,"C": 1,"D": "a"},
      {"A": 4,"B": 5,"C": 15,"D": "b"},
      {"A": 9,"B": 10,"C": 80,"D": "b"}
    ]
  },
  "mark": "circle",
  "select": {"id": {"type": "point","on": "mauseover"}},
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": [
      {"if": "id","field": "D","type": "nominal"},
      {"value": "grey"}
    ],
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

var button = document.getElementById('search');
var file = document.getElementById('hideFile');
var output = document.getElementById('output');

button.addEventListener('click',function(){
  file.click();
});

file.addEventListener('change',function(event){
  var f = event.target.files;
  if(!f.length) {
    output.innerHTML = "Upload Image";
    output.title = "";
    return;
  } else {
    output.innerHTML = "";    
    }
  var fileList = "";
  for(var i=0;i<f.length;i++){
    fileList += f[i].name;
    if(i<f.length-1) fileList += ", ";
  }
  output.innerHTML = fileList;
  output.title = fileList;
});

#search{
  border: solid 0px #33aaff;
  margin:10px;
  outline:0;
  background-color:transparent;
  display:block;
  height:30px;
  padding:0px;
}
#hideFile{
  display:none !important;
}

#search *{
  float:left;
  display:block;
  height:100%;
  border: solid 1px #cccccc;
  line-height:28px !important;
  top:0px !important;
  padding: 0 15px;
  vertical-align:middle !important;
}

#search span:nth-child(1){
  color:#4371B3 !important;
  
}
#search span:nth-child(2){
  width:200px;
  background-color:#eee;
  color:#aaa;
  white-space:nowrap;
  overflow:hidden;
}
#search span:nth-child(3){
  background-color:#4371B3;
  color:white !important;
  border-radius:0 6px 6px 0;
}

如何设置/自定义输入类型文件元素？

2 个答案: