創建一個能同時處理文件和url的單個<input>？

我讓我的用戶導入本地和遠程文件，但我怎麼能使用一個單一的輸入處理這兩種情況？像創建一個能同時處理文件和url的單個<input>？

enter image description here

或者使用單選按鈕：

像＃1，我可以使用標籤做

<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

注意的遠程主機上處理文件的方式並不重要。

來源

2012-12-17 Alain Tiemblo

我不認爲你可以，至少跨瀏覽器的不可靠。你真的想用一個輸入控件來達到它並非真正爲之設計的目的。最好堅持使用單選按鈕多選方法。 – FixMaker

我認爲你是對的，如果沒有人（即：谷歌，臉譜或SO）不使用這種技巧，那是因爲意想不到的佈局或行爲。但是這個問題無論如何都需要一個嘗試;-) –

我找到了工作方式使用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"。

來源

2012-12-17 11:45:24

不錯，但我不明白爲什麼人們在z-index上過分誇大。當你只有兩個元素時，爲什麼直行1000？ –

你說得對，我對css不是很熟悉，我的錯誤。 –

創建一個能同時處理文件和url的單個<input>？

回答

相關問題