Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2015, 15:19
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Автоочистка Input file
Добрый день, есть Jquery плагин:
(function($) {
	$.fn.jInputFile = function(options) {
		
		return this.each(function() {
		
			$(this).val('');
			$(this).wrap('<div></div>');
			$(this).parent().css('height', $(this).height());
			$(this).after('<div class="jInputFile-fakeButton"></div><div class="jInputFile-blocker"></div><div class="jInputFile-activeBrowseButton jInputFile-fakeButton"></div><div class="jInputFile-fileName"></div>');
			$(this).addClass('jInputFile-customFile');
		
			$(this).hover(
				function () {
					$(this).parent().children('.jInputFile-activeBrowseButton').css('display', 'block');
				},
				function () {
					$(this).parent().children('.jInputFile-activeBrowseButton').css('display', 'none');
				}
			);
		
			$(this).change(function(){
				var file = $(this).val();
           
				//Находим название файла и его расширение
				var reWin = /.*\\(.*)/;
				var fileName = file.replace(reWin, '$1');
				var reUnix = /.*\/(.*)/;
				fileName = fileName.replace(reUnix, '$1');
				var regExExt =/.*\.(.*)/;
				var ext = fileName.replace(regExExt, '$1');
			
				//Показываем значок и имя файла
				var pos;
				if (ext){
					switch (ext.toLowerCase()) {
						case 'doc': pos = '0'; break;
						case 'bmp': pos = '16'; break;                       
						case 'jpg': pos = '32'; break;
						case 'jpeg': pos = '32'; break;
						case 'png': pos = '48'; break;
						case 'gif': pos = '64'; break;
						case 'psd': pos = '80'; break;
						case 'mp3': pos = '96'; break;
						case 'wav': pos = '96'; break;
						case 'ogg': pos = '96'; break;
						case 'avi': pos = '112'; break;
						case 'wmv': pos = '112'; break;
						case 'flv': pos = '112'; break;
						case 'pdf': pos = '128'; break;
						case 'exe': pos = '144'; break;
						case 'txt': pos = '160'; break;
						default: pos = '176'; break
					};
					$(this).parent().children('.jInputFile-fileName').html(fileName).css({'background-position':('0px -'+pos+'px'),'background-repeat':'no-repeat', 'display':'block'});
				};	
			});	
		});
	}
})(jQuery);

есть кнопка, при клике на которую сбрасывается input, но поле с именем файла не зачищается.
Подскажите, как редактировать код, что бы он сам при освобождении inputa очищал свое поле?
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2015, 15:54
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Или может лучше сразу искать другой плагин?
Тогда кто-то может дать ссылку на такой?
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2015, 16:41
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

чтобы очистить имя файла в списке выбора нужно сделать копию этого элемента, старый удалить и заменить новым. плагин тут не причем
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2015, 17:04
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

если я правильно понимаю, то этот участок кода
$(this).parent().children('.jInputFile-fileName').html(fileName)
- отвечает за присвоение диву названия загружаемого файла, можно же как-то сделать что бы по клику на обьеки из вне присваивалось пустое поле
я пробовал сделать так
$('span#clear_div').click(function(){
                    $('div.jInputFile-fileName').innerHTML = '';
                  });
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2015, 17:23
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

или может в этот код вставить создание блока очистки
$(this).after('<div class="jInputFile-fakeButton"></div><div class="jInputFile-blocker"></div><div class="jInputFile-activeBrowseButton jInputFile-fakeButton"></div><div class="jInputFile-fileName"></div> <div class="clear_div"></div>');

а под него уже прописать функцию,
$('div.clear_div').click(function(){
                    $('div.jInputFile-fileName').innerHTML = '';
                  });

??
Ответить с цитированием
  #6 (permalink)  
Старый 03.11.2015, 19:29
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

в общем я решил вопрос так:
(function($) {
	$.fn.jInputFile = function(options) {
		var control = $("#my_file");
		return this.each(function() {
		
			$(this).val('');
			$(this).wrap('<div></div>');
			$(this).parent().css('height', $(this).height());
			$(this).after('<div class="jInputFile-fakeButton"></div><div class="jInputFile-blocker"></div><div class="jInputFile-activeBrowseButton jInputFile-fakeButton"></div><div class="jInputFile-fileName"></div><div class="clear_div"></div>');
			$(this).addClass('jInputFile-customFile');
		
			$(this).hover(
				function () {
					$(this).parent().children('.jInputFile-activeBrowseButton').css('display', 'block');
				},
				function () {
					$(this).parent().children('.jInputFile-activeBrowseButton').css('display', 'none');
				}
			);
		
			$(this).change(function(){
				var file = $(this).val();
           
				//Находим название файла и его расширение
				var reWin = /.*\\(.*)/;
				var fileName = file.replace(reWin, '$1');
				var reUnix = /.*\/(.*)/;
				fileName = fileName.replace(reUnix, '$1');
				var regExExt =/.*\.(.*)/;
				var ext = fileName.replace(regExExt, '$1');
			
				//Показываем значок и имя файла
				var pos;
				if (ext){
					switch (ext.toLowerCase()) {
						case 'doc': pos = '0'; break;
						case 'bmp': pos = '16'; break;                       
						case 'jpg': pos = '32'; break;
						case 'jpeg': pos = '32'; break;
						case 'png': pos = '48'; break;
						case 'gif': pos = '64'; break;
						case 'psd': pos = '80'; break;
						case 'mp3': pos = '96'; break;
						case 'wav': pos = '96'; break;
						case 'ogg': pos = '96'; break;
						case 'avi': pos = '112'; break;
						case 'wmv': pos = '112'; break;
						case 'flv': pos = '112'; break;
						case 'pdf': pos = '128'; break;
						case 'exe': pos = '144'; break;
						case 'txt': pos = '160'; break;
						default: pos = '176'; break
					};
					$(this).parent().children('.jInputFile-fileName').html(fileName).css({ 'display':'block'});
					$(this).parent().children('.clear_div').css({ 'display':'block'});
				};	
			});	

                  $('div.clear_div').click(function(){
                    $('div.jInputFile-fileName').html("");
                    control.replaceWith( control = control.clone( true ) );
                  });
		});
	}
})(jQuery);

+к карме мне
Ответить с цитированием
  #7 (permalink)  
Старый 03.11.2015, 19:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ерунда все это, удаление имени файла из некоего элемента не означает очистку поля выбора файла, то есть при отправке формы файл будет отправляться. И еще case 'doc': pos = '0'; break; лучше заменить на объект - тип файла будет свойством, а значение позицией.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пустой file input суссесфул или не successful? kostyanet Элементы интерфейса 1 08.01.2015 17:56
Проверка input file dizent jQuery 13 26.09.2013 18:32
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera, input file, div tabindex autosoft Events/DOM/Window 31 04.07.2012 02:45
Обработка нескольких file input Temlekur Работа 8 21.01.2010 18:30