Мне нужно решение для открытия диалогового окна открытого файла в HTML, нажав div. Диалоговое окно открытого файла должно открываться при нажатии div.
Я не хочу отображать поле входного файла как часть HTML-страницы. Он должен отображаться в отдельном диалоговом окне, которое не является частью веб-страницы.
Вот хороший
Тонкая демонстрация загрузчика
Это элемент управления <input type='file' />. Но div находится над этим, и стили css применяются для получения этого чувства. Непрозрачность файлового управления установлена в 0, поэтому появляется диалоговое окно при нажатии на div.
$("#logo").css('opacity','0');
$("#select_logo").click(function(e){
e.preventDefault();
$("#logo").trigger('click');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">Я не знаю, почему никто не указал на это, но вот способ сделать это без Javascript, и он также совместим с любым браузером.
EDIT: в Safari input отключается, когда скрывается с display: none. Лучшим подходом было бы использовать position: fixed; top: -100em.
<label>
Open file dialog
<input type="file" style="position: fixed; top: -100em">
</label>
Если вы предпочитаете, вы можете пойти "правильным способом", используя for в label, указав на id ввода, как это:
<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
На самом деле вам не нужны все эти вещи с непрозрачностью, видимостью, стилем <input> и т.д. Просто взгляните:
<a href="#">Just click me.</a>
<script type="text/javascript">
$("a").click(function() {
// creating input on-the-fly
var input = $(document.createElement("input"));
input.attr("type", "file");
// add onchange handler if you wish to get the file :)
input.trigger("click"); // opening dialog
return false; // avoiding navigation
});
</script>
Демо на jsFiddle. Протестировано в Chrome 30.0 и Firefox 24.0. Однако не работало в Opera 12.16.
Это то, что сработало лучше для меня (протестировано на IE8, FF, Chrome, Safari).
#file-input {
cursor: pointer;
outline: none;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
filter: alpha(opacity=0); /* IE < 9 */
opacity: 0;
}
.input-label {
cursor: pointer;
position: relative;
display: inline-block;
}<label for="file-input" class="input-label">
Click Me <!-- Replace with whatever text or icon you wish to use -->
<input type="file" id="file-input">
</label>Что делать, если javascript отключен на клиентской машине? Используйте следующее решение для всех сценариев. Вам даже не нужен javascript/jQuery.
HTML
<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>
CSS
#fileInput{opacity:0}
body{
background:cadetblue;
}
Объяснение: for="Your input Id". Триггеры кликов по умолчанию по HTML. Поэтому он по умолчанию запускает событие click, не нужно jQuery/javascript. Если его просто сделать HTML, зачем использовать jQuery/jScript? И вы не можете сказать, отключен ли клиент JS. Ваша функция должна работать, даже если JS отключен.
Работа jsFiddle (вам не нужно JS, jquery)
Сначала добавьте теги head:
<script>
function showDialog(openFileDialog) {
document.getElementById(openFileDialog).click();
}
function fileName(openFileDialog) {
return document.getElementById(openFileDialog).value;
}
function hasFile(openFileDialog) {
return document.getElementById(openFileDialog).value != "";
}
function fileNameWithoutFakePath(openFileDialog) {
var fileName = document.getElementById(openFileDialog).value;
return fileName.substr(fileName.lastIndexOf('\\') + 1);
}
function fakePathWithoutFileName(openFileDialog) {
var fileName = document.getElementById(openFileDialog).value;
return fileName.substr(0, fileName.lastIndexOf('\\'));
}
</script>
если у вас уже есть теги script, просто добавьте эти функции выше.
В тэгах тело или формы добавлено:
<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>
Независимо от того, где в вашем html, просто , как этот, вы создали новый экземпляр класса OpenFileDialog как переменную global, имя которой id элемента, независимо от того, где в вашем коде или xaml, , но в вашем script или коде, вы не можете введите свое имя и затем прочитайте свойство или вызовите функцию, потому что существуют глобальные функции, которые выполняют те, которые не определены в элементе input type="file". Вам просто нужно предоставить этим функциям идентификатор скрытого input type="file", который является именем экземпляра OpenFileDialog как строки.
Чтобы облегчить вашу жизнь при создании экземпляров диалоговых окон открытых файлов в ваш html, вы можете сделать функцию, которая делает это:
function createAndAddNewOpenFileDialog(name) {
document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}
и если вы хотите удалить диалоговое окно открытого файла, вы можете сделать и использовать следующую функцию:
function removeOpenFileDialog(name) {
var html = document.getElementById("yourBodyOrFormId").innerHtml;
html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
document.getElementById("yourBodyOrFormId").innerHtml = html;
}
но перед удалением диалогового окна открытого файла убедитесь, что он существует, создав и используя следующую функцию:
function doesOpenFileDialogExist(name) {
return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}
и если вы не хотите создавать и добавлять открытые диалоги файлов в теги body или формы в html, так как это добавляет скрытый тип ввода = "файл", то вы можете сделать это в script с помощью функции create выше:
function yourBodyOrFormId_onload() {
createAndAddNewOpenFileDialog("openFileDialog1");
createAndAddNewOpenFileDialog("openFileDialog2");
createAndAddNewOpenFileDialog("openFileDialog3");
createAndAddNewOpenFileDialog("File Upload");
createAndAddNewOpenFileDialog("Image Upload");
createAndAddNewOpenFileDialog("bla");
//etc and rest of your code
}
Убедитесь, что рядом с тегами тела или формы вы добавили:
onload="yourBodyOrFormId_onload()"
Вам не нужно делать эту строку выше, если вы это уже сделали.
СОВЕТ: Вы можете добавить в свой проект или новый веб файл JScript, если его еще нет, и в этом файле вы можете поместить все функции диалогового окна с открытым файлом из script, а также страницу html или веб-формы и использовать их на странице html или веб-формы из этого JScript файла, но не забудьте прежде, чем связать страницу html или веб-формы с файлом JScript конечно. Вы можете сделать это, просто перетащив JScript файл на страницу html в теги head. Если ваша страница - это веб-форма, а не простой html, и у вас нет заголовков, тогда помещайте их куда угодно, чтобы она могла работать. Не забудьте определить глобальную переменную в этом JScript файле, значением которого будет ваше тело или идентификатор формы как строка. После того, как вы связали JScript файл со своей страницей html или веб-формой, вы можете загрузить событие вашего тела формы, установить значение этой переменной в свой тег или идентификатор формы. Затем в JScript файле вам больше не нужно давать документу идентификатор тела или формы одной страницы, просто укажите значение этой переменной. Вы можете вызвать эту переменную bodyId или formId или bodyOrFormId или любое другое имя, которое вы хотите.
Удачи!
Может быть, вам может быть интересно это: http://code.google.com/p/upload-at-click/
При нажатии на элемент откроется диалоговое окно "Открыть файл" и
запустить пользовательскую функцию.
AFAIK вам по-прежнему нужен элемент <input type="file">, тогда вы можете использовать некоторые вещи из quirksmode, чтобы стилизовать его
Самый простой способ:
#file-input {
display: none;
}<label for="file-input">
<div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>Единственное без <input type="file"> - это вложение прозрачного флеш-ролика над div. Затем вы можете использовать созданное пользователем событие click (совместимое с новыми правилами безопасности Flash 10), чтобы вызвать вызов flash FileReference.browse.
Он предлагает дополнительную зависимость от метод quirksmode, но взамен вы получаете гораздо больше событий (например, встроенные события прогресса).
Может использовать
$('<input type="file" />').click()