スタイル入力タイプ=「ファイル」 - ファイル名のjavascript-ソリューションは

Question

を動作しません、私はプロジェクトのために見栄えの良い「uploadbutton」を必要とし、ウェブ上のスタイリング解決策を見つけた： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ それは、これまで正常に動作しますが、私はすることができます実行するJavaスクリプトを取得しないでください。

HTML：

<input type="file" name="file" id="file" class="inputfile" /> 
<label for="file">Choose a file</label> 

JS：

var inputs = document.querySelectorAll('.inputfile'); 
Array.prototype.forEach.call(inputs, function(input) 
{ 
    var label = input.nextElementSibling, 
     labelVal = label.innerHTML; 

    input.addEventListener('change', function(e) 
    { 
     var fileName = ''; 
     if(this.files && this.files.length > 1) 
      fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
     else 
      fileName = e.target.value.split('\\').pop(); 

     if(fileName) 
      label.querySelector('span').innerHTML = fileName; 
     else 
      label.innerHTML = labelVal; 
    }); 
}); 

私もjsfiddleでそれを試してみましたが、今のところ（https://jsfiddle.net/LLpd1vev/1/）も何の成功をhadeません。私はjsで全く経験がないので、istがウェブサイト上にあったのでコードを取った。

ユーザビリティにとって非常に重要なファイル名が表示されているので、そこには存在しないため多くの質問があります。

すべてのヘルプは高く評価されています。

Answer 1

あなたはほぼあります。あなたのJSは必要なときに働いています。あなたのコードの最後の部分にメッセージが届かない理由はあります。ここで

if(fileName) 
    label.querySelector('span').innerHTML = fileName; 
else 
    label.innerHTML = labelVal; 

コードは、変数fileNameを人口であり、それがある場合、それはあなたのlabel要素内span要素を探しますかどうかを確認するためにチェックしています。これはあなたのHTMLには存在しないので、javascriptはエラーをチャックします（これはchromeのコンソールを使って確認できます）。 HTMLはこのようになります。

<input type="file" name="file" id="file" class="inputfile" /> 
<label for="file"><span>Choose a file</span></label> 

ここでは、この問題の修正されたJSFiddleが修正されました。