Я хочу сделать огонь событий с кликом на теге <input type="file"> программно.
Просто вызов click(), похоже, ничего не делает или, по крайней мере, он не открывает диалог выбора файла.
Я экспериментировал с захватом событий с помощью прослушивателей и перенаправлением события, но я не смог получить это, чтобы фактически выполнить событие, как кто-то нажал на него.
Вы не можете сделать это во всех браузерах, предположительно, IE разрешает это, но Mozilla и Opera этого не делают.
Когда вы создаете сообщение в GMail, функция "прикреплять файлы" реализована одним способом для IE и любого браузера, который поддерживает это, а затем реализовал другой способ для Firefox и тех браузеров, которые этого не делают.
Я не знаю, почему вы не можете этого сделать, но одна вещь, которая представляет собой угрозу безопасности, и которую вы не можете делать в любом браузере, программно задает имя файла в элементе HTML File.
Я искал решение для всего этого дня. И вот те выводы, которые я сделал:
Надеюсь, это поможет!:)
<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>
Вы можете запускать клик() в любом браузере, но некоторым браузерам необходимо, чтобы элемент был видимым и сфокусированным. Здесь пример jQuery:
$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();
Он работает со шкурой перед click(), но я не знаю, работает ли это, не вызывая метод show. Никогда не пробовал это в Opera, я тестировал на IE/FF/Safari/Chrome, и он работает. Надеюсь, это поможет.
ЭТО ВОЗМОЖНО: Под FF4 +, Opera?, Chrome: но:
inputElement.click() следует вызывать из контекста действия пользователя! (не script контекст выполнения)
<input type="file" /> должен быть видимым (inputElement.style.display !== 'none') (вы можете скрыть его видимостью или чем-то другим, но не "отображаемым" свойством)
Для тех, кто понимает, что вам нужно наложить невидимую форму по ссылке, но слишком ленивы писать, я написал ее для вас. Ну, для меня, но может также поделиться. Комментарии приветствуются.
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, вы всегда можете использовать последующую марку до стиля, как вам угодно, это показано в 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 Чисто и верно, однако, некоторые OLDER (удаленные) браузеры могут по-прежнему испытывать проблемы с ним (например, 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;
};
};
Я знаю, что это устарело, и все эти решения - это хаки по предосторожностям безопасности браузера с реальной стоимостью.
Тем не менее, на сегодняшний день fileInput.click() работает в текущем Chrome (36.0.1985.125 m) и в настоящее время Firefox ESR (24.7.0), но не в текущем IE (11.0.9600.17207). Наложение поля файла с непрозрачностью 0 поверх кнопки работает, но я хотел, чтобы элемент ссылки был видимым триггером, а подчеркивание hover не совсем работает в любом браузере. Он мигает, а затем исчезает, возможно, браузер думает, действительно ли применяется стиль наведения или нет.
Но я нашел решение, которое работает во всех этих браузерах. Я не буду утверждать, что тестировал каждую версию каждого браузера, или что я знаю, что он будет продолжать работать вечно, но, похоже, он удовлетворяет мои потребности сейчас.
Это просто: расположите поле ввода файла вне экрана (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>Есть способы перенаправления событий в элемент управления, но не ожидайте, что вы сможете легко запускать события в управление огнем самостоятельно, поскольку браузеры попытаются заблокировать это (хорошие) соображения безопасности.
Если вам нужно только открыть диалоговое окно файла, когда пользователь нажмет что-нибудь, скажем, потому что вам нужны более удобные кнопки для загрузки файлов, тогда вы можете взглянуть на что Шон Инман придумал.
Мне удалось добиться запуска клавиатуры с творческим переключением фокуса внутри и вне контроля между нажатиями клавиш, нажатиями клавиш и событиями клавиш. YMMV.
Мой искренний совет - оставить это в покое, потому что это мир несовместимости с браузером. Незначительные обновления браузера могут также блокировать трюки без предупреждения, и вам, возможно, придется повторно изобретать хаки, чтобы он работал.
Я изучал это некоторое время назад, потому что я хотел создать пользовательскую кнопку, которая откроет диалоговое окно файла и сразу начнет загрузку. Я просто заметил что-то, что могло бы сделать это возможным - firefox, кажется, открывает диалог, когда вы нажимаете в любом месте загрузки. Таким образом, это может сделать следующее:
Это только теоретически, так как я уже использовал другой метод для решения проблемы, но это может сработать.
Этот код работает для меня. Это то, что вы пытаетесь сделать?
<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 Developer Tools или Mozilla Firefox Firebug, используя команду "edit HTML" правой кнопкой мыши. В этом случае укажите script или что-то подобное:
Если у вас JQuery:
$('#id_of_component').click();
если нет:
document.getElementById('id_of_component').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>
Я обнаружил, что если вход (файл) является наружной формой, тогда срабатывание щелчка события вызывает диалог с файлом.
Надеюсь, это помогает кому-то - я провел 2 часа, ударяя головой о него:
В IE8 или IE9, если вы инициируете открытие ввода файла с помощью javascript каким-либо образом (поверьте, я пробовал их все), он не позволит вам отправить форму с помощью javascript, она просто будет терпеть неудачу.
Отправка формы с помощью обычной кнопки отправки может работать, но вызывается form.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.
Итак, у вас может быть следующая настройка:
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>