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

Maybe my question is a duplicate, but i tried a lot of answers found around here, with no success.

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

On my jsp page, I have an input type file, but also an upload button, that triggers the uploading. Something like this:

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

And some js:

还有一些js:

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

When i click on 'Please choose file' button, a new window for selection appears. But when i select the file, everything goes away, so i am now able to hit the actual 'Upload' button at all. Can you help me, please?

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

1 个解决方案

#1

What I do is make a div with a custom layout and place an invisible file select above it. This way the user actualy clicks the file upload. If you want to display the name of the selected file you will need some javascript though.

我所做的是使用自定义布局创建一个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>

and some js:

和一些js:

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