Неправильно поняты функции Javascript

Я пытаюсь настроить HTML file input и написал простую функцию API jquery:

(function($)
{ 
 $.fn.selectFileInputGUI = function()
 { 
 var outerWrapper = $('<div><code>').css({'display':'inline-block'});
 var innerWrapper = $('</code><div><code>').css({'width':'0', 'height':'0', 'overflow':'hidden'});
 var fileInput = $('').attr({type:'file'});
 var fileNameHTML = $('</code><div><code>').css({'display':'inline-block', 'margin-left':'3px'});

 var selectBtnGUI = $('</code><button><code>').addClass('btn btn-success btn-sm').text('Select file').click(function()
 {
 $.fn.selectFileInputGUI.resetInput();
 fileInput.trigger('click');
 });

 fileInput.on('change', function()
 { 
 $.fn.selectFileInputGUI.displayFileName();
 });

 $(this)
 .append(outerWrapper.append(innerWrapper.append(fileInput)).append(selectBtnGUI))
 .append(fileNameHTML);

 $.fn.selectFileInputGUI.displayFileName = function()
 {
 var fileName = fileInput.val();
 if(fileName.length &gt; 0)
 {
 var pos = fileName.lastIndexOf("\\");
 if(pos != -1) fileName = fileName.substr(pos + 1);
 if(fileName.length &gt; 14) fileName = fileName.substr(0, 14) + '...';
 } else
 {
 fileName = 'File not selected';
 }
 fileNameHTML.text(fileName);
};


 $.fn.selectFileInputGUI.resetInput = function()
 { 
 fileInput.wrap('</code><form><code>').parent('form').trigger('reset');
 fileInput.unwrap();
 }; 
}
})(jQuery);</code>

 <p> Когда я пытаюсь применить функцию <code>selectFileInputGUI</code> api к нескольким селекторам, только последний селектор хорошо управляет - <a href="http://jsfiddle.net/URKM5/5/rel=nofollow" rel="nofollow noreferrer" target="_blank">http://jsfiddle.net/URKM5/5/</a></p> <p> Как правильно его реализовать?</p> </form></button></div></div></div>
1 ответ

Похоже, ваша проблема заключается в том, как вы повторно используете переменную fileInput и fileNameHTML, после выбора пользователем файла, и вы вызываете этот $.fn.selectFileInputGUI.displayFileName(); fileInput и fileNameHTML всегда ссылаются на fileInput и fileNameHTML второго файлаDialog (потому что второй файлDialog инициализируется после первого и все эти переменные переопределены). Поэтому, чтобы решить эту проблему, вам необходимо передать эти переменные через так называемые данные событий, это очень полезно в этом случае:

//Note the second argument, it passed in as event data
//You can access the event data via e.data
fileInput.on('change', fileNameHTML, function(e) { 
 $.fn.selectFileInputGUI.displayFileName($(this), e.data);
});

Ваш displayFileName нужно принимать 2 аргумента, первый относится к fileInput (который может быть принят в качестве $(this) в onchange обработчик события fileInput), вторая относится к fileNameHTML (который передается в качестве e.data).

//note about the change of the arguments
$.fn.selectFileInputGUI.displayFileName = function(fileInput, fileNameHTML) {
 //the code is unchanged here ...
}

Теперь выбор файлов между двумя диалоговыми окнами является независимым.

Demo.

После более глубокого изучения проблемы, похоже, вам не нужно использовать данные о событиях здесь. Просто передайте fileNameHTML как второй аргумент в displayFileName(...). Обновленная демоверсия

licensed under cc by-sa 3.0 with attribution.