javascript - 隐藏文件的文本框上传浏览按钮

Question

标题可能会使问题看起来更老，但还有更多内容。

为了隐藏浏览按钮的文本框，我添加了以下代码。

 <html:form action="/validate" enctype="multipart/form-data">
    <html:file property="file" id="selectedFile" style="display: none;" />
    <input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
   <html:sumbit/>
 </html:form>

它在选择文件之前运行良好。我正在为我的元素使用 spring。

当我使用此方法时，我无法将文件获取到类方法中。我需要隐藏文本框。以下是我在类里面使用的代码。

 public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        FileUploadForm uploadForm = (FileUploadForm) form;
        FileOutputStream outputStream = null;
        FormFile formFile = null;
        try {
            formFile = uploadForm.getFile();
            String path = getServlet().getServletContext().getRealPath("") + "/" + formFile.getFileName();
            outputStream = new FileOutputStream(new File(path));
            outputStream.write(formFile.getFileData());
        } finally {
            if (outputStream != null) {
                outputStream.close();
            }
        }
        uploadForm.setMessage("The file " + formFile.getFileName() + " is uploaded successfully.");
        return mapping.findForward(SUCCESS);
    }

由于文件未在此处接收，因此显示 FileNotFound 异常。 如果我使用带文本框的普通浏览按钮，代码运行良好。但是要求就像，应该隐藏文本框。而且按钮也不应该与 css 混淆。任何想法出了什么问题。

Answer 1

不要使用display:none，使用height:0;width:0;opacity:0;

为什么？

当您使用 display:none 时，该元素会从文档结构中完全删除，因此您的代码中不会感知到。

Please note that a display of 'none' does not create an invisible box; it creates no box at all. http://www.w3.org/TR/CSS2/visuren.html#propdef-display