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();
    });
});

当我点击＆＃39;请选择文件＆＃39;按钮，出现一个新的选择窗口。但是当我选择文件时，一切都消失了，所以我现在能够实现真正的上传＆＃39;完全按钮。你能帮帮我吗？

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());
});

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

1 个答案: