Custom file picker without using <input type=“file”/>

问题

I am working on a java-based (webwork framework) web-app where the file to be uploaded needs to be compressed first. Since there's no way to set the value of "input type='file'" element via javascript, I decided to take the route of an embedded applet. Basically this applet compresses the chosen file, then uploads the compressed file to the server via scp.

It worked well, but I have issues regarding the rendering of the web page itself. I am thinking instead of implementing the file picker within the applet, if there's an existing file picker that I can use instead. Of course without putting any "input type='file'".

Links to these existing custom web file pickers will be very much appreciated.

回答1:

Due to security restrictions the only way to select a file with HTML is adding an <input type=file> to document. Then user should selects a file with real clicks.

Note that javascript is able (in modern browsers) to read the content of file, so it should not be able to select arbitrary file and read it.

回答2:

This always works.

<div id="input_container" style="width: 0px; height: 0px; overflow: hidden"><input type="file" id="inputfile" /></div>
<div class="button" onclick="upload();">Upload file</div>

And your script

function upload(){
 document.getElementById('inputfile').click();
}

Your CSS

.button {
   /*button style here*/
}

来源：https://stackoverflow.com/questions/15086997/custom-file-picker-without-using-input-type-file