4

ユーザーがローカル ファイルとリモート ファイルをインポートできるようにしていますが、単一の入力を使用して両方のケースを処理するにはどうすればよいですか?

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>

切り替え可能な :

ここに画像の説明を入力

しかし、どうすればそのようなフィールドを作成できますか:

ここに画像の説明を入力

リモートホストでファイルを処理する方法は重要ではないという質問全体に注意してください。

4

1 に答える 1

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

于 2012-12-17T11:45:24.273 に答える