如何設計/自定義輸入類型文件元素？

Question

我正在使用MVC 5與bootstrap。如何設計輸入類型文件元素，如下圖所示。

.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; 
 
}

<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>

請幫我...

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的線條，使效果更佳。試試看。

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; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button id="search"> 
 
    <span class="glyphicon glyphicon-picture"></span> 
 
    <span id="output">Upload Image</span> 
 
    <span class="glyphicon glyphicon-search">Browse</span> 
 
    <input id="hideFile" type="file" multiple/> 
 
</button>