File dialog from JavaScript * without * <input>

Question

I am adding file import functionality to an existing page.

I want to do this with javascript and without modifying the page, i.e. without adding an input type = "file" tag, everyone seems to be saying.

I added a button, now I want the event to display a file dialog, the user was viewing the file and javascript to send the file to the server for verification.

How can I do it? Btw, the main priority is to open the file dialog box, so there is no need for the user or sending a part if you do not know this.

thanks

Answer 1

, , , -...

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

file . ?

EDIT: 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"/>

The following input file triggers:

<i class="fa fa-camera-retro fa-3x" type="button" data-toggle="tooltip" title="Escoje tu foto de perfil" id="secondbutton" ></i> (I used the icon)

Which brings up my second button:

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

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