<div class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-sm-8"><br><br>
<div class="form-group">
<div class="input-group">
  <input type="text" class="form-control" readonly>
<div class="input-group-btn">
  <span class="fileUpload btn btn-success">
      <span class="upl" id="upload">Upload single file</span>
      <input type="file" class="upload up" id="up" onchange="readURL(this);" />
    </span><!-- btn-orange -->
 </div><!-- btn -->
 </div><!-- group -->
 </div><!-- form-group -->
      <div class="form-group">
<div class="input-group">
  <input type="text" class="form-control" readonly>
<div class="input-group-btn">
  <span class="fileUpload btn btn-info">
      <span class="upl" id="upload">Upload multiple file</span>
      <input type="file" class="upload up" id="up" onchange="readURL(this);" multiple/>
    </span><!-- btn-orange -->
 </div><!-- btn -->
 </div><!-- group -->
 </div><!-- form-group -->
      </div>
    </div>
  </div>

.it .btn-orange
{
	background-color: blue;
	border-color: #777!important;
	color: #777;
	text-align: left;
  width:100%;
}
.it input.form-control
{
	
	border:none;
  margin-bottom:0px;
	border-radius: 0px;
	border-bottom: 1px solid #ddd;
	box-shadow: none;
}
.it .form-control:focus
{
	border-color: #ff4d0d;
	box-shadow: none;
	outline: none;
}
.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
$(document).on('change','.up', function(){
		   	var names = [];
		   	var length = $(this).get(0).files.length;
			    for (var i = 0; i < $(this).get(0).files.length; ++i) {
			        names.push($(this).get(0).files[i].name);
			    }
			    // $("input[name=file]").val(names);
				if(length>2){
				  var fileName = names.join(', ');
				  $(this).closest('.form-group').find('.form-control').attr("value",length+" files selected");
				}
				else{
					$(this).closest('.form-group').find('.form-control').attr("value",names);
				}
	   });
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js