【问题标题】:input type file modified with separate upload button使用单独的上传按钮修改的输入类型文件
【发布时间】:2014-01-17 15:32:52
【问题描述】:

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

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

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

【问题讨论】:

  • everything goes away 是什么?
  • 就像页面上的所有元素一样,它向我展示了一个空白页面。

标签: javascript html file jsp input


【解决方案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());
});

【讨论】:

  • 问题是我需要将 id 放在上面,因为当我点击上传时我会做一些其他的事情。也许这是个问题?
  • 你可以将'input[type=file]'替换为输入框的id,在javascript函数中做更多的事情。
  • 好的。另外,在你的回答中,div 类按钮无论如何都没有链接到输入文件,所以如果我点击它,它不会打开选择文件页面。
  • 这就是重点。输入在 div 元素上方,但对用户是不可见的。可能是我的示例中的定位不完美,我快速编写了代码。你可以添加'z-index:999;'到输入以确保它在顶部。
  • 我也这样做了,但我仍然不知道我应该点击哪里打开那个窗口:)
猜你喜欢
  • 1970-01-01
  • 2013-08-13
  • 1970-01-01
  • 2018-01-03
  • 2015-05-28
  • 2016-12-10
  • 1970-01-01
  • 1970-01-01
  • 2014-01-12
相关资源
最近更新 更多