不使用 <input type="file"/> 的自定义文件选择器 [英] Custom file picker without using &lt;input type=&quot;file&quot;/&gt;

问题描述

我正在开发一个基于 Java(网络工作框架)的网络应用程序，需要先压缩要上传的文件.由于无法通过javascript设置input type='file'"元素的值，我决定走嵌入式小程序的路线.基本上这个小程序会压缩选定的文件，然后通过 scp 将压缩文件上传到服务器.

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.

它运行良好，但我对网页本身的呈现有疑问.我正在考虑如果有一个现有的文件选择器可以代替，而不是在小程序中实现文件选择器.当然不放任何input type='file'".

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.

推荐答案

这总是有效的.

<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>

还有你的剧本

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

你的 CSS

.button {
   /*button style here*/
}

这篇关于不使用 <input type="file"/> 的自定义文件选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！