Jquery 创建单个<；输入>；可以同时处理文件和URL吗？

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

与Stackoverflow一样，我也可以使用选项卡：

或者使用单选按钮，如：

<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>

.displayNone{
显示：无；
}
文件类型：
统一资源定位地址
文件
$（“#无线电url”）。单击（函数（）{
$（'#url'）.removeClass（'displayNone'）；
$（'#file'）.addClass（'displayNone'）；
});
$（“#无线电文件”）。单击（函数（）{
$（'#file'）.removeClass（'displayNone'）；
$（'#url'）.addClass（'displayNone'）；
});

提供了一个可切换的：

但我如何才能创建这样一个字段：

---

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

我找到了一种使用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>

.集装箱{
位置：相对位置；
}
.url{
位置：绝对位置；
排名：0；
左：0；
z指数：2；
}
文件或URL:

在

input type=“file”

上方提供一个可编辑的

input type=“text”

：

---

但我认为这会很棘手，因为浏览器的布局和行为对于

input type=“file”

来说是不同的，我认为您不能，至少不能跨浏览器进行可靠的操作。你真的试图使用一个输入控件来达到一个它不是专门为之设计的目的。可能最好还是坚持你的单选按钮多选法。我认为你是对的，如果没有人（比如谷歌、facebook等）不使用这种技巧，那是因为意外的布局或行为。但无论如何，这个问题需要一试；-）很好，但我不明白为什么人们在z指数上过度杀戮。当你只有两个元素的时候，为什么要直接去买1000呢？