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

Question

也许我的问题是重复的，但我尝试了很多在这里找到的答案，但没有成功。

在我的 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>

还有一些js：

    $(document).ready(function() {
    $("#selectFileButton").click(function() {
        $("#file").click();
    });
});

当我点击“请选择文件”按钮时，会出现一个新的选择窗口。但是当我选择文件时，一切都消失了，所以我现在完全可以点击实际的“上传”按钮。 你能帮帮我吗？

Answer 1

我所做的是制作一个具有自定义布局的 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>

还有一些js：

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