Контроль загрузки файлов и GWT Look and Feel

Question

Я пишу свой первый проект GWT.У меня есть форма с ярлыком, контролем загрузки файлов и кнопкой загрузки, но они выглядят ужасно и слишком разные в разных браузерах.Также кнопка из элемента управления загрузкой файлов не имеет такой же стиль, как кнопка управления GWT.А другая проблема в том, что в Chrome кнопка выбора файла находится слева?!?

Что я могу с этим поделать?

Загрузка файла в Internet Explorer :

Загрузка файлов Internet Explorer http://www.stackoverflow.com.s3.amazonaws.com/FileUploadIE.png

Загрузка файлов в Firefox :

Загрузка файлов Firefox http://www.stackoverflow.com.s3.amazonaws.com/FileUploadFirefox.png

Загрузка файловв Chrome :

Загрузка файла Chrome http://www.stackoverflow.com.s3.amazonaws.com/FileUploadChrome.png

Answer 1

<input type="file"> будет выглядеть по-разному в разных браузерах. Это то, как они и мы должны жить с этим.

Но я не думаю, что об этом стоит беспокоиться. Если кто-то выберет работу с браузером, он решит, как будет выглядеть браузер, включая отображение 10000 *

.

Также невозможно изменить стили кнопок этого элемента управления (прилично / чисто).

По-моему, вы можете оставить их такими, какие они есть. Для меня <input type="file"> - это некий системный элемент управления, принадлежащий system (браузер), а не программисту. Вы также не можете решить, какие файлы отображать, а какие нет (например, фильтровать и отображать «.doc» и «.docx», и ничего другого невозможно)

Если по какой-то причине вам действительно действительно нужен единый унифицированный интерфейс: некоторые веб-сайты используют изображение кнопки и используют флэш-память для отображения окна открытия файла. Это зависит от наличия вспышки, хотя. Я помню (память 2 года) в YUI был элемент управления для этого типа ввода файлов (основанный на flash), возможно, в GWT есть аналогичный. Хотя я не очень уверен.

Answer 2

К сожалению, так выглядит <input type='file' /> в различных браузерах. Виджет FileUpload просто оборачивает этот тип ввода.

Если вы хотите иметь согласованный пользовательский интерфейс для загрузки файлов, вы можете сделать что-то вроде следующего.

• Создайте стилизованную кнопку для загрузки файла.
• Каким-то образом (не знаю, как), поймайте событие щелчка и у вас есть скрытый FileUpload виджет, который как-нибудь откроет диалог просмотра.
• Показать, какой файл они выбрали, вызвав getFilename() из скрытого виджета FileUpload.

Я действительно не уверен, что это сработает, но это возможный способ решить эту проблему.

Answer 3

Есть статья о quirksmode , в которой показано решение, использующее трюк CSS для наложения поля ввода практически на что угодно.рекомендовать эту технику, потому что она выглядит для меня как неприятный (хотя и красивый) трюк.Я также представляю, что некоторые браузеры могут использовать механизмы защиты от этой техники, так как это может выглядеть как Clickjacking .

Answer 4

Еще один простой способ сделать это. Сделайте тег «тип файла ввода» в HTML и скрыть его. Затем нажмите кнопку и отформатируйте ее в соответствии с потребностями. После этого используйте javascript / jquery, чтобы программно щелкнуть тег ввода при нажатии кнопки.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JAVASCRIPT: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Вот рабочая скрипка JS для того же: - http://jsfiddle.net/32na3/