<div class="fileform">
	<input type="file" name="file" id="file" class="inputfile"  data-multiple-caption="{count} files selected" multiple/>
	<label for="file">
		<i class="glyphicon glyphicon-paperclip"></i>
		<span class="file__choose">Выберите файл</span>
	</label>
</div>

<script>

	var inputs = document.querySelectorAll('.inputfile');
	Array.prototype.forEach.call(inputs, function(input){
	  var label	 		= input.nextElementSibling,
	      labelVal 	= label.innerHTML;
	  input.addEventListener('change', function(e){
	    var fileName = '';
	    if( this.files && this.files.length > 1 )
	      fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
	    else
	      fileName = e.target.value.split( '\\' ).pop();
			if( fileName )
	      label.querySelector( 'span' ).innerHTML = fileName;
	    else
	      label.innerHTML = labelVal;
		});

	  // фикс для firefox
		input.addEventListener('focus', function(){
			input.classList.add( 'has-focus' );
		});
		input.addEventListener('blur', function(){
			input.classList.remove( 'has-focus' );
		});
	});

</script>

<style>
	.fileform .file__choose {
	  margin-left: 6px;
	}

	.fileform #file {
	  width: 0.1px;
	  height: 0.1px;
	  opacity: 0;
	  overflow: hidden;
	  position: absolute;
	  z-index: -1;
	}

	.fileform #file + label {
	  display: -webkit-inline-box;
	  display: -webkit-inline-flex;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	  -webkit-box-align: center;
	  -webkit-align-items: center;
	      -ms-flex-align: center;
	          align-items: center;
	  padding: 4px 12px;
	  cursor: pointer;
	  font-size: 1.2em;
	  font-weight: 500;
	  -webkit-border-radius: 8px;
	          border-radius: 8px;
	  color: #484848;
	  background: #f4f4f4;
	}

	.fileform #file:focus + label,
	.fileform #file + label:hover {
	  color: #fcfcfc;
	  background-color: #5882b8;
	}

	.fileform #file:focus + label {
	  outline: 1px solid #d9625e;
	  outline: -webkit-focus-ring-color auto 5px;
	}

	.fileform #file + label * {
	  pointer-events: none;
	}
</style>