Файл диалога из JavaScript * без * <input>

Question

Я добавляю функцию импорта файлов на существующую страницу.

Я хочу сделать это с использованием JavaScript и без изменения страницы, т.е.без добавления тега "input type =" file "", кажется, все говорят.

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

Как мне это сделать?Кстати, основным приоритетом является открытие файла диалога, поэтому нет необходимости для пользователя или отправки части, если вы не знаете его.

Thx

Answer 1

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

<input type="button" value="Add File" onclick="document.getElementById('file').click()" />
<input type="file" id="file" style="display:none" />

Скрытие объекта file и вызов диалогового окна файла с другим объектом.Правильно?

РЕДАКТИРОВАТЬ: Только Javascript

onclick="var f=document.createElement('input');f.style.display='none';f.type='file';f.name='file';document.getElementById('yourformhere').appendChild(f);f.click();"

Поместите это в ваш объект с id вашего form вместо yourformhere !!

Answer 2

Вот способ сделать это без 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">

Answer 3

Я спрятал свою первую кнопку вот так

<input style="display:none;" type="file" id="file" name="file"/>

Следующий файл запускает входной файл:

<i class="fa fa-camera-retro fa-3x" type="button" data-toggle="tooltip" title="Escoje tu foto de perfil" id="secondbutton" ></i> (я использовал значок)

Что вызывает мою вторую кнопку:

$( "#secondbutton" ).click(function() {
        $( "#file" ).click();
});

С http://api.jquery.com/click/