Пользовательская кнопка загрузки файла

Question

<input type="file"/> позволяет выбрать файл на локальном компьютере и загрузить его дальше.Но я хотел настраиваемую кнопку, которая позволяет открыть file browser dialog и продолжить загрузку, нажав на настраиваемую кнопку тоже.пожалуйста, смотрите ниже пример .Предположим, что

<input type="file" id="file-upload"  />  /* file upload */
<input type="button" id="customized"  />  /* simple button */ 

следующее - это jQuery fn, и она позволяет кнопке работать как кнопка загрузки файла.

$(function(){
    $('#customized').click(function() {  /* cutomized button clicked */
               $('#file-upload').click();  /* Now file upload button auto clicked & file browser dialog opens. */

     });
});

выше js работает на машине с Windows, в то время как it doesn't work on Linux, Why?Также я знаю, что ОС не имеет ничего общего, и браузер отвечает за это.Пожалуйста, помогите мне разобраться с этой проблемой
Windows - -> mozila IE chrome: работает, пожалуйста, проверьте пример

Linux не работает ни в одном браузере

Answer 1

Если вам не нужна строка с именем файла, это прекрасно работает :) http://jsfiddle.net/fxfPL/

.replaced-upload-button {
    display: inline-block;
    position:relative;
    overflow:hidden;
    /*for looks only*/background: #ddd;padding: 5px; border: 1px solid #3d3d3d;
}

/*for looks only*/.replaced-upload-button:hover { background: orangered; color: #fff; }

.original-upload-button {
    position: absolute;
    top:0;
    left:0;
    width: 9999%;
    margin-left: -9899%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
    filter: alpha(opacity=50);/* IE 5-7 */
    -moz-opacity: 0.5;/* Netscape */
    -khtml-opacity: 0.5;/* Safari 1.x */
    opacity: 0.5;/* Good browsers */
}

.original-upload-button:hover { cursor: pointer }

Answer 2

Имея такую ​​же проблему недавно и увидела эту страницу. Томас, ваш ответ великолепен и работал очень хорошо с небольшими изменениями в IE8.

Проблема в IE8 заключается в том, что текст обзора оригинальной кнопки просмотра перекрывается с новым, созданным с помощью замены кнопки. Для тех, кто испытывает ту же проблему, вы можете изменить непрозрачность оригинальной кнопки загрузки на 0:

.original-upload-button {
    position: absolute;
    top:0;
    left:0;
    width: 9999%;
    margin-left: -9899%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */
    filter: alpha(opacity=0);/* IE 5-7 */
    -moz-opacity: 0;/* Netscape */
    -khtml-opacity: 0;/* Safari 1.x */
    opacity: 0;/* Good browsers */
}

Вы можете использовать другую кнопку, которая вызовет событие нажатия кнопки загрузки файла. Кнопка загрузки исходного файла останется скрытой. Я использовал имя класса Tomas 'для кнопки загрузки исходного файла, чтобы скрыть его.

Я полагаю, что это решение было бы также хорошо, если вы используете серверные элементы управления (но учтите, что вам нужно настроить привязку события click элемента управления сервером).

http://jsfiddle.net/shiego926/X98yp/

Надеюсь, этот код поможет!

Answer 3

Это больше связано с версией браузера, а не с ОС или браузером.

Я полагаю, что это также может привести к сбою в Opera в Windows - так как некоторые браузеры предотвращают запуск событий при вводе файлового типа.

Вместо этого вы можете сделать этот старый трюк CSS - http://www.quirksmode.org/dom/inputfile.html