创建一个单独的<input />来一次处理文件和URL?

时间:2012-12-17 11:25:18

标签: jquery html css forms file-upload

我允许我的用户导入本地和远程文件,但是如何使用单个输入来处理这两种情况呢?

与Stackoverflow一样,我可以使用标签来实现:

enter image description here

或使用以下单选按钮:

<style>
    .displayNone {
        display:none;
    }
</style>

<form action="test.php">
    File type:
    <input id="radio-url" name="type" type="radio" checked value="url" /> URL
    <input id="radio-file" name="type" type="radio" value="file" /> File
    <div id="url">
        <input name="url" type="text" />
    </div>
    <div id="file" class="displayNone">
        <input name="file" type="file" />
    </div>
    <input type="submit" value="Send" />
</form>

<script type="text/javascript">
        $('#radio-url').click(function() {
            $('#url').removeClass('displayNone');
            $('#file').addClass('displayNone');
        });
        $('#radio-file').click(function() {
            $('#file').removeClass('displayNone');
            $('#url').addClass('displayNone');
        });
</script>

提供可切换:

enter image description here

但我怎样才能创建这样一个领域:

enter image description here

请注意整个问题,即远程主机上处理文件的方式并不重要。

1 个答案:

答案 0 :(得分:3)

我找到了一种使用CSS的工作方式:

<style>
    .container {
        position: relative;
    }
    .url {
        position: absolute;
        top:0;
        left:0;
        z-index:2;
    }
</style>

<form action="test.php">
    File or URL :
    <div class="container">
        <input name="file" type="file" />
        <input class="url" name="url" type="text" />
    </div>
    <input type="submit" value="Send" />
</form>

input type="text"

之上提供可编辑的input type="file"

enter image description here

但我认为这会很棘手,因为input type="file"的浏览器布局和行为不同。