我允许我的用户导入本地和远程文件,但是如何使用单个输入来处理这两种情况呢?
与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>
提供可切换:
但我怎样才能创建这样一个领域:
请注意整个问题,即远程主机上处理文件的方式并不重要。
答案 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"
但我认为这会很棘手,因为input type="file"
的浏览器布局和行为不同。