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

Question

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

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

Ниже приводится JQuery п & она позволяет кнопки работает как кнопка загрузки файла.

$(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? также я знаю OS не имеет ничего общего и браузер несет ответственность за это. Пожалуйста, помогите мне разобраться в этой проблеме
Windows - ->mozilaIEchrome: работы, please check example

Linuxне работает в любом браузере

Answer 1

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

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

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

Answer 2

Если вы не нуждаетесь в баре, который показывает имя файла, это работает отлично :) 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 3

Имея тот же вопрос, а недавно и увидел эту страницу. Tomas, ваш ответ велик и очень хорошо работал с небольшой настройкой на 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/

Надежда этот код поможет!