Автоочистка 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 очищал свое поле? |
Или может лучше сразу искать другой плагин?
Тогда кто-то может дать ссылку на такой? |
чтобы очистить имя файла в списке выбора нужно сделать копию этого элемента, старый удалить и заменить новым. плагин тут не причем
|
если я правильно понимаю, то этот участок кода
$(this).parent().children('.jInputFile-fileName').html(fileName)- отвечает за присвоение диву названия загружаемого файла, можно же как-то сделать что бы по клику на обьеки из вне присваивалось пустое поле я пробовал сделать так $('span#clear_div').click(function(){ $('div.jInputFile-fileName').innerHTML = ''; }); |
или может в этот код вставить создание блока очистки
$(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 = ''; }); ?? |
в общем я решил вопрос так:
(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); +к карме мне :) |
Ерунда все это, удаление имени файла из некоего элемента не означает очистку поля выбора файла, то есть при отправке формы файл будет отправляться. И еще case 'doc': pos = '0'; break; лучше заменить на объект - тип файла будет свойством, а значение позицией.
|
Часовой пояс GMT +3, время: 09:20. |