Я искал решение для этого весь день. И вот какие выводы я сделал:

1. по соображениям безопасности Opera и Firefox не позволяют запускать ввод файлов.
2. единственной удобной альтернативой является создание "скрытого" входного файла (используя непрозрачность, а не "скрытый" или "дисплей: нет"!) и после этого создать кнопку "ниже" его. Таким образом, кнопка видна, но при нажатии пользователем она фактически активирует файл вход.

надеюсь, что это помогает! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

вы можете запустить click () в любом браузере, но некоторые браузеры должны быть видны и сфокусированы. Вот пример jQuery:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

он работает с скрыть перед click() но я не знаю, если он работает без вызова метода Show. Никогда не пробовал это в Opera, я тестировал на IE/FF/Safari/Chrome, и это работает. Я надеюсь, что это поможет.

ЭТО ВОЗМОЖНО: Под FF4+, Опера ?, Хромированный: но:

1. inputElement.click() должен быть вызван из контекста действия пользователя! (не контекст выполнения скрипта)

2. <input type="file" /> должно быть видно (inputElement.style.display !== 'none') (вы можете скрыть его видимость или что-то другое, но не свойство display)

для тех, кто понимает, что вы должны наложить невидимую форму по ссылке, но слишком ленивы, чтобы писать, я написал это для вас. Ну, для меня, но можно и поделиться. Комментарии приветствуются.

HTML (где-то):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (где-то вы не заботитесь о):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

попробуйте это решение: http://code.google.com/p/upload-at-click/

Если вы хотите click метод для работы с Chrome, Firefox и т. д., примените следующий стиль к вашему входному файлу. Это будет совершенно скрыто, это, как вы делаете display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

это так просто, я проверил это работает!

$(document).one('mousemove', function() { $(element).trigger('click') } );

работал на меня, когда я столкнулся с подобной проблемой, это обычный eRube Goldberg.

работает :

по соображениям безопасности в Firefox и Opera вы не можете запустить щелчок по входному файлу, но вы можете имитировать с помощью MouseEvents:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

мое решение для Safari с jQuery и jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

РАБОЧЕЕ РЕШЕНИЕ

позвольте мне добавить к этому старому сообщению, рабочее решение, которое я использовал, которое работает, вероятно, в 80% или более всех браузеров как новых, так и старых.

решение является сложным, но простой. Первым шагом является использование CSS и маскировка типа входного файла с помощью "подэлементов", которые показывают, что он имеет непрозрачность 0. Следующий шаг заключается в использовании JavaScript, чтобы обновить метки, как необходимый.

HTML_{идентификаторы просто вставляются, если вам нужен быстрый способ доступа к определенному элементу, однако классы являются обязательными, поскольку они относятся к CSS, который устанавливает весь этот процесс}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{имейте в виду, раскраски и шрифты-стили и такие полностью ваши предпочтения, Если вы используете этот базовый CSS, вы всегда можете использовать after-end mark до стиля, как вы пожалуйста, это показано на jsFiddle, перечисленных в конце.}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript_{чистый и истинный, однако, некоторые старые (отставные) браузеры все еще могут иметь проблемы с ним (например, Netscrape 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

рабочий пример на jsFiddle

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

Что сказал, на сегодняшний день, fileInput.click () работает в текущем Chrome (36.0.1985.125 m) и текущем Firefox ESR (24.7.0), но не в текущем IE (11.0.9600.17207). Наложение поля файла с непрозрачностью 0 поверх кнопки работает, но я хотел, чтобы элемент ссылки был видимым триггером, а подчеркивание при наведении курсора не совсем работает в любом браузере. Он мигает, а затем исчезает, вероятно, браузер думает о том, действительно ли применяется стиль наведения или нет.

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

Это просто: расположите поле ввода файла за пределами экрана (позиция: абсолютная; сверху: - 5000px), поместите вокруг него элемент метки и вызовите щелчок по метке, а не само поле файла.

обратите внимание, что ссылка должна быть написана для вызова метода click метки, он не делает это автоматически, как при нажатии на текст внутри элемента метки. По-видимому, элемент link захватывает щелчок, и он не доходит до метки.

обратите внимание также, что это не обеспечивает способ показать текущий выбранный файл, так как поле находится за пределами экрана. Я хотел отправить сразу же, когда файл был выбран, так что это не a проблема для меня, но вам потребуется несколько иной подход, если ваша ситуация отличается.

просто используйте метку метки, таким образом вы можете скрыть ввод и заставить его работать через связанную метку https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

JS Скрипка:http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

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

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

Я был в состоянии достичь клавиатуры запуск с творческим смещением фокуса В и из-под контроля между событиями keydown, keypress & keyup. МММ.

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

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

1. создать файл и загрузить отдельный элемент, содержащий изображение, которое вы хотите использовать в качестве кнопки
2. расположить их внахлест и сделать файл элемент backgroud и граница прозрачны, поэтому кнопка-это единственное, что видно
3. добавьте javascript, чтобы IE открыл диалоговое окно при нажатии кнопки / ввода файла
4. используйте событие onchange для отправки формы при выборе файла

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

этот код работает для меня. Это то, что вы пытаетесь сделать?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

вот чисто JavaScript решение этой проблемы. Хорошо работает во всех браузерах

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

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

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

для AngularJS или даже для обычного javascript.

теперь это будет возможно в Firefox 4, с оговоркой, что он считается всплывающим окном и поэтому будет заблокирован всякий раз, когда всплывающее окно было бы.

вот решение, которое работает для меня: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML с помощью "малого" JQuery:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

просто убедитесь, что maskfied покрывается принудительно истинным полем загрузки.

Я <input type="button"> тег скрыт от глаз. То, что я сделал, было прикрепление "onClick" событие для любого видимого компонента любого типа, такого как метка. Это было сделано с помощью инструментов разработчика Google Chrome или Firebug Mozilla Firefox, используя команду "редактировать HTML" Правой Кнопкой Мыши. В этом случае укажите следующий скрипт или что-то подобное:

если у вас есть JQuery:

$('#id_of_component').click();

если нет:

document.getElementById('id_of_component').click();

спасибо.

вы можете сделать это в соответствии с ответом от открыть диалоговое окно файл на тег

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Я обнаружил, что если вход(файл) находится вне формы, то запуск события щелчка вызывает диалоговое окно файла.

надеюсь, это кому - то поможет-я провел 2 часа, стуча головой об него:

в IE8 или IE9, если вы запускаете открытие файла ввода с javascript в любом случае (поверьте мне, я пробовал их все), он не позволит вам отправить форму с помощью javascript, он просто молча не удастся.

Отправка формы с помощью обычной кнопки отправки может работать, но вызов формы.submit (); будет молча терпеть неудачу.

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

это сработало для меня:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

это не невозможно:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

но как-то это работает, только если это в функции, которая была вызвана через click-event.

таким образом, вы можете иметь следующие настройки:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

можно использовать

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>