type="file"

by AJIEKCEU

HTML

<input class="input-file" type="file"/>

CSS

.input-file-box {
position: relative;
width: 241px;
height: 26px;
overflow: hidden;
background: url("http://senseit.ru/i/file.png") 0 0 no-repeat;
cursor: pointer;
}
.input-file-box input[type="text"] {
position: absolute;
top: 2px;
left: 3px;
width: 175px;
height: 21px;
line-height: 16px;
border: none;
background: transparent;
cursor: pointer;
}

JavaScript

(function($){
	$.fn.customFile = function(options) {
    	
		var settings = {
        	inputFileBox: 'input-file-box'
        };
		
		return this.each(function() {
		
			if (options) {
				$.extend(settings, options);
			}
		
			var $this = $(this);
			var inputFileBox = settings.inputFileBox;
			var inputFileBoxClass = '.'+inputFileBox;
			
			$this.wrap("<div class=" + inputFileBox + "></div>");
			$this.after("<input type='text'>");
			
			var inputFileBoxJq = $this.closest('.'+inputFileBox);
			var fileText = $this.closest(inputFileBoxClass).find(':text');
                                
			$this.css({
				'position':'absolute',
				'left':'-9999px'
			});     	
			
        	inputFileBoxJq.on('click', function(event){	
				var $target = $(event.target);
				if ($target.is(':file')) {
				}
				else {
					$(this).find(':file').trigger('click');
				}
			});	
	
			$this.on('change', function(){
				var valFile = $(this).attr('value');		
				fileText.attr('value', valFile).trigger('blur');
			});
			
			
		});
		
	};
})(jQuery);
$(document).ready(function() {
	//Вызов функции
	$('.input-file').customFile();
});