Вы не можете сделать это во всех браузерах, предположительно IE делает разрешает это, но Mozilla и Opera этого не делают.

Когда вы составляете сообщение в GMail, функция «прикреплять файлы» реализуется одним способом для IE и любого браузера, который поддерживает это, а затем реализуется другим способом для Firefox и тех браузеров, которые этого не делают.

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

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

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

Мне удалось добиться срабатывания клавиатуры с творческим переключением фокуса между событиями keydown, keypress и keyup. YMMV.

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

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

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

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

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

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>

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

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/

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

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

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

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

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

<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>

Вот решение, которое работает для меня: 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();

Спасибо.

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

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

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

ЭТО ВОЗМОЖНО: В FF4 +, Opera?, Chrome: но:

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

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

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

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

Вы можете сделать это согласно ответу Диалоговое окно открытия файла для тега <a>

<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>

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

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

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

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

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

Оно работает :

По соображениям безопасности в 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">

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

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

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

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

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

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

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

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

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

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

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

JS Fiddle: 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>

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

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

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

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

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);      
    }

Вот чистое решение этой проблемы на 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>

Вы можете использовать

<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>

Привет, это решение работает. для загрузки мы должны использовать 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.