Диалоговое окно открытия файла в JavaScript

    $("#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">

для IE добавьте это:

$("#logo").css('filter','alpha(opacity = 0');

Я не знаю, почему никто не указал на это, но вот способ сделать это без JavaScript, а также он совместим с любым браузером.

---

редактировать: в 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 и Firefox 30.0 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>

объяснение: Я разместил входной файл непосредственно над элементом, который нужно щелкнуть, поэтому любые щелчки будут либо приземляться на него, либо на его метку (которая подтягивает диалоговое окно загрузки, как если бы вы нажали на саму метку). У меня были некоторые проблемы с частью кнопки ввода по умолчанию, торчащей из стороны метки, поэтому overflow: hidden на входе и display: inline-block на этикетке были необходимы.

Что делать, если 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" . Запускает событие click по умолчанию в HTML. Поэтому он по умолчанию запускает событие щелчка, нет необходимости в jQuery / javascript. Если это просто сделано HTML, зачем использовать jQuery / jScript? И вы не можете сказать, если клиент отключил JS. Ваши черты должно работать, даже если JS выключен.

рабочая jsFiddle (вам не нужно JS, jquery)

добавить в глава теги:

<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 типа глобальные переменная, имя которой id элемента, независимо от где в вашем коде или xaml,но в вашем скрипте или коде, вы не могу введите его имя, а затем прочитайте свойство или вызовите функцию, потому что есть глобальные функции, которые выполняют те, которые не определены в элементе 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
}

и если вы не хотите создавать и добавлять диалоги открытия файлов в тело или форма теги в html, потому что это добавление скрытого типа ввода= "file" s, затем вы можете сделать это в скрипте, используя функцию создать выше:

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-страницу в тег глава теги. Если ваша страница-это веб-форма, а не простой html, и у вас нет тегов head, то поместите ее в любом месте, чтобы она могла работать. Не забудьте определить глобальную переменную в этом файле JScript, значение которой будет вашим телом или идентификатором формы в виде строки. После того, как вы связали файл JScript на вашу страницу html или веб-формы, вы можете onload событие вашего тела формы, установить значение этой переменной для вашего тела или идентификатора формы. Затем в файле JScript вам больше не нужно давать документу идентификатор тела или формы одной страницы, просто дайте ему значение этой переменной. Вы можете вызвать эту переменную bodyId или код_формы или bodyOrFormId или любое другое имя вы хотите.

удачи мужик!

может быть вам будет интересно это: http://code.google.com/p/upload-at-click/

при нажатии на элемент будет открыт диалог "открыть файл" и

выполнить пользовательскую функцию.

AFAIK вам все еще нужен <input type="file"> элемент, вы можете использовать некоторые вещи из quirksmode чтобы стиль его

только без <input type="file"> Это путем встраивания прозрачного флэш-фильма над div. Затем вы можете использовать созданное пользователем событие click (совместимое с новыми правилами безопасности Flash 10), чтобы вызвать вызов flash FileReference.обзор.

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

самый простой способ:

#fileInput {
  display: none;
}

<label for="fileInput">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="fileInput"/>

что важно, используя display: none гарантирует, что ни одно место не будет занято скрытым вводом файла (что происходит с помощью opacity: 0).