Javascript 使用单独的上载按钮修改输入类型文件

也许我的问题是重复的，但我尝试了很多答案，但都没有成功

在我的jsp页面上，我有一个输入类型的文件，还有一个上传按钮，可以触发上传。大概是这样的：

<div id="test_form">
<input type="file" id="file" style = "position:absolute; top:-100px;">
<button id="selectFileButton">Please choose file</button>
</div>
<button id="upload">Upload selected file</button>

当我点击“请选择文件”按钮时，会出现一个新的选择窗口。但是当我选择文件时，所有的东西都消失了，所以我现在可以点击实际的“上传”按钮了。

---

你能帮我吗？

我要做的是用自定义布局制作一个div，然后在上面放置一个不可见的文件。这样，用户实际单击文件上载。如果要显示所选文件的名称，则需要一些javascript

<div style="position: relative; width: 300px; height: 50px;">
    <div class="button" style="position: absolute;">Click me!</div>
    <input type="file" style="float: left; opacity: 0; cursor: pointer;" />
</div>

---

一切都消失了

什么是一切？就像页面上的所有元素一样，它会显示一个空白页面。问题是我需要在上面放置id，因为我在点击upload时会做一些其他事情。也许这是个问题？您可以用输入框的id替换“input[type=file]”，并在javascript函数中执行更多操作。好的。另外，在您的回答中，div class按钮无论如何都没有链接到输入文件，因此如果我单击它，它将不会打开“选择文件”页面。这就是重点。输入位于div元素上方，但用户看不见。在我的示例中，可能是定位不完美，我很快编写了代码。您可以添加“z-index:999；”我也这样做了，但我不知道应该在哪里单击以打开该窗口：）

<div style="position: relative; width: 300px; height: 50px;">
    <div class="button" style="position: absolute;">Click me!</div>
    <input type="file" style="float: left; opacity: 0; cursor: pointer;" />
</div>

$("input[type=file]").change(function(){
    $(this).siblings("div").eq(0).html($(this).val());
});