Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменить type file (Загрузить файл) (https://javascript.ru/forum/misc/63190-izmenit-type-file-zagruzit-fajjl.html)

sashgera 22.05.2016 23:31

Изменить type file (Загрузить файл)
 
Здравствуйте
Есть JS который заменяет стандартный инпут type file (Загрузить файл)
Инпут выглядит в виде дива-кнопки и при выборе файла текст в диве меняется - с "Прикрепить файл" на имя прикрепленного файла
вот пример
<input type="file" name="attach-order" class="attach_order" id="attachorder" title="Прикрепить файл" onchange="attachVM(this);">

<script type="text/javascript">
$(document).ready(function(){
	$.fn.customFile = function(){
		return this.each(function(){
			var $file = $(this).addClass('customfile'),
			$wrap = $('<div class="customfile-wrap">'),
			$link = $('<div style="display: inline-block; background-color: #ccc; padding: 10px 40px; cursor: pointer;" class="inp_default_text" href="javascript:void(0);">'+$file[0].title+'</div>'),
			$label = $('<label class="inp_default_text" for="'+ $file[0].id +'">'+$file[0].title+'</label>'), //Hack for IE
			isIE = /msie/i.test(navigator.userAgent);
			$file.css({
				position: 'absolute',
				left: '-9999px'
			});
			$wrap.insertAfter($file).append( $file, ( isIE ? $label : $link ));
			$file.attr('tabIndex', -1);
			$link.attr('tabIndex', -1);
			$link.click(function(){
				$file.focus().click(); 
			});
			$file.change(function(){
				var filename = $file.val().split('\\').pop();
				$link.html(( filename ? filename : $file[0].title ));     
			});
		});
	};
	$('input[class=attach_order]').customFile(); 
});
</script>

Прошу помощи, не получается сделать отдельно див-кнопку "Загрузить файл" и инпут, в котором будет имя прикрепленного файла
примерно как на этой картинке:


sashgera 24.05.2016 19:29

Тема закрыта. Вопрос решен.


Часовой пояс GMT +3, время: 22:03.