如何動態更改輸入類型文件的標題？

我想實現一個不同類型的輸入文件，所以我使用了一個改變默認值的css和html選項。所以，我有以下的html代碼：如何動態更改輸入類型文件的標題？

<div class="fileinputs">&nbsp; 
<input type="file" class="file" id="file" name="file" title="There aren't any files chosen yet." style="width:270px;"/> 
<div class="fakefile"> 
<input tyle="button" name="button" value="Choose the file you want (click)" /> 
</div> 
</div>

然後，CSS代碼：

div.fileinputs {position: relative;} 
div.fakefile { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      z-index: 1; 
      } 
input.file { 
      position: relative; 
      text-align: right; 
      -moz-opacity:0 ; 
      filter:alpha(opacity: 0); 
      opacity: 0; 
      z-index: 2; 
      }

一切都看起來不錯，當我懸停鼠標輸入，它讓我看到標題我在HTML中寫道。但我希望它在選擇文件後進行更改，以顯示我選擇的文件的名稱。我怎樣才能做到這一點？提前致謝。

來源

2014-01-22 Razvan N

您可能能夠使用JavaScript和一些解析一貫得到的文件名，但你應該離開，研究你自己並回來，如果你不能得到它的工作。 – musefan

我真的不明白downvotes，我問這個問題，因爲我真的需要一個答案。如果我能以其他方式發現，我不會在這裏寫下它。 :)但謝謝。 –

不是我的失望，但我會想象這是因爲你沒有表現出努力來解決這個問題。我建議使用javascript進行研究，但是現在有人已經爲你完成了工作（即使你沒有標記javascript/JQuery，你似乎對使用它們的答案感到滿意），所以你不必爲自己做任何事情。 ..這不是生活中的前進方向 – musefan

試試這個代碼：

DEMO

JS：

$('input').change(function(){ 
     $(this).attr('title',($(this).val())); 
    });

來源

2014-01-22 09:48:55 Manoj

就是這樣，非常感謝你！ –

試試這個只顯示文件名，沒有顯示完整路徑..http：//jsfiddle.net/manojmcet/y4Lff/ – Manoj

再次感謝，那也是我需要@Manoj的東西。 –

如何動態更改輸入類型文件的標題？

回答

相關問題