Javascriptを使用してフォーム内でファイルを選択する際にラベルテキストを変更する方法

私の質問を見ていただきありがとうございます。Javascriptを使用してフォーム内でファイルを選択する際にラベルテキストを変更する方法

私は以下のリンク先でこれに似た質問をしました。残念ながら、答えはコードスニペットでは動作しますが、私のサイトでは動作しません。空白のHTML文書を作成し、次のコードを挿入しました。私がしようとしていることの基本はこれです。ファイル入力タグはCSSを使用して非表示になります。次に、ラベルタグを使用して入力タグの制御を引き継ぎます。ファイルを選択すると、ファイル名（パスではない）がラベル内に表示され、画像もユーザーに表示されるようにします。私の最後の質問で以前に述べたように、私はjQueryを使いたくありません。私のコードを見て、手伝ってくれてありがとう！

相続人は、私の前の質問：How do I change HTML Label Text Once File Has Been Selected using Javascript

相続人は私の「index2.php」ファイル内のコード：

<html> 
    <head> 
    <script> 
     var profilePic = document.getElementById('profilepic'); /* finds the input */ 

     function changeLabelText() { 
     var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
     var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
     profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
     var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
     if (profilePicValue !== '') { 
      profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
     } 
     } 

     profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    </script> 
    </head> 
<body> 
    <div class="changepic-wrap"> 
    <form action="changepicauth.php" method="post"> 
     <input type="file" name="profilepic" id="profilepic" class="inputfile"> 
     <br> 
     <label for="profilepic"> 
     <img src="#" /> 
     Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
     <button>Change Picture</button> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

出典

2016-08-08 J. Robinson

... 'でをあなたの "ファイルのアップロード" ラップ'と 'innerHTML'を変更。 –

私はタグを使いたくありません。アドバイスをありがとうが、それは私がやろうとしているものではない。 –

場所だけ</body>前に文書の最後に<script>...</script>、。

このように、DOMは既にロードされており、onloadまたはonDOMContentLoadedイベントをリッスンする必要はありません。

出典

2016-08-08 20:47:55 Rounin

お試しください！私は@ Rouninが来て、この問題を解決するだろうと知っていました！ありがとう！ –

以前の質問とそれの答えを振り返ります。 DOMがロードされていることを確認するチェックがないことがわかりました。そのコードをコピーして貼り付けておけば、あなたのウェブサイト上でうまくいくはずがありません。

は、これらのいずれかを使用してみてください：

document.addEventListener('DOMContentLoaded', function() { myFunction(); });

または

window.onload = myFunction();

または

<body onload="myFunction()"> <!-- in the html -->

私は最初のオプションをお勧めします。関数の中であなたのために書かれたコード（myFunction（）;のように）を暗号化し、それらのメソッドの1つを使って呼び出す必要があります。さもなければ、コードはまだロードされていないDOMに何かをしようとしています。

to enaborate：あなたのコードをonload関数の中に置く必要があります。あなたの名前はあなたの名前とは関係ありません。

<script> 
    function myFunction(){ 
      var profilePic = document.getElementById('profilepic'); /* finds the input */ 

      function changeLabelText() { 
      var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
      var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
      profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
      var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
      if (profilePicValue !== '') { 
       profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
      } 
      } 
      profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    } 

window.onload = myFunction(); 
</script>

出典

2016-08-08 19:46:34 user3044394

私はそれらのどれもが機能することを除いて、これらの異なる方法のすべてを試しました。 changeLabelText（）という言い回しを使用し、function（）などの一般化された言い回しを使用しないで、あなたの答えをより具体的にしてください。ありがとう。 –

編集後もまだ動作しません。私の新しいコードはこのペーストビンで見つけることができます。 http://pastebin.com/iibrgqkS –

すべてのコードをonloadに配置する必要があります。あなたはその関数を呼びたくはありません。私が今投稿したことを試してみてください – user3044394

私は最終的に2つの質問の上に他の人の助けを借りて結論に来ました。どのブラウザでも動作するFINALコードは次のとおりです。あなたの助けをありがとう！

<html> 
    <body> 
    <div class="changepic-wrap"> 
     <form action="changepicauth.php" method="post"> 
     <input type="file" name="profilepic" id="profilepic" class="inputfile"> 
     <br> 
     <label for="profilepic"> 
      <img src="#" /> 
      Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
      <button>Change Picture</button> 
     </div> 
     </form> 
    </div> 

    <script> 
     var profilePic = document.getElementById('profilepic'); /* finds the input */ 

     function changeLabelText() { 
     var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ 
     var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ 
     profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ 
     var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ 
     if (profilePicValue !== '') { 
      profilePicLabelText.textContent = profilePicValue; /* changes the label text */ 
     } 
     } 


     profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */ 
    </script> 
    </body> 
</html>

出典

2016-08-08 20:59:28

Javascriptを使用してフォーム内でファイルを選択する際にラベルテキストを変更する方法

答えて

関連する問題