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

邮差的信 提交于 2020-01-04 06:26:08

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!