Javascriptを使用してHTMLラベルのテキストを一度選択した場合の変更方法

Question

ご質問ありがとうございます。私はファイル入力フィールドを持っている下のフォームを持っています。私はこの入力フィールドを非表示にして、プライマリの "ボタン"としてラベルを使用してファイルを選択しています。ユーザーが "Upload Picture ..."ラベルをクリックすると、ラベル内のテキストを "Upload Picture ..."からファイル名に変更します。私はこのチュートリアルを以下に従っていますが、（チュートリアルで）書かれたjavascriptは、複数のファイルをユーザーが選択できるようにしています。私はユーザーが1つのファイルを選択できるようにしています。これはあなたのプロフィール画像ページを変更して、このフォームが何をするかについて少し洞察を与えます。ここで

はコードです：ここでは

<!-- Change Picture Form --> 
      <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="/images/profile/upload.png" /> 
        Upload Picture... 
       </label> 
       <br> 
       <div class="button-wrap"> 
        <button>Change Picture</button> 
       </div> 
       </form> 
      </div> 

はチュートリアルです：

http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

誰かが私がしなければならないものを私に説明するのに役立つことはできますか？私はeventlistenerの行に沿って何かを考えているが、私はjavascriptについてはわからない。私はバックエンドの開発者であり、javascriptについてはほとんど知りません。私はJQUERYを使用したくない。ストレートジャバスクリプトのみ。

もう一度お手伝いをしていただきありがとうございますStackOverflowメンバー！ ：D

編集： 一部の人々は、テキストがすでに変更されていると言いました。そうではありません...私はLABELテキストを変更します。 "ファイル入力"タグには2つの部分があります。ボタン、およびボタンの横にあるテキスト。私は以下のSASSコードを使用して入力タグを隠しました。この方法では、「画像のアップロード...」というラベルテキストのみが表示されます。このSASSコードをファイルに追加して、LABELテキストが変更されないことを確認してください。

.inputfile 
     width: 0.1px 
     height: 0.1px 
     opacity: 0 
     overflow: hidden 
     position: absolute 
     z-index: -1 

Answer 1

あなたはとき#profilepicinput変化の値を検出するためにはJavaScript onchangeイベントを使用することができます。

valueを#profilepicinputにキャプチャし、ラベルのテキストをvalueに置き換えることができます。

例：あなたはchangeイベント、event.targetに等しいfor属性値を持つselect要素を使用することができます

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 */

<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="/images/profile/upload.png" /> 
 
Upload Picture... 
 
</label> 
 
<br> 
 
<div class="button-wrap"> 
 
<button>Change Picture</button> 
 
</div> 
 
</form> 
 
</div>

Answer 2

：#profilepic要素idは、event.target.files[0].nameに選択された要素の.innerHTMLを設定しました

私のために働く10

document.getElementById("profilepic") 
 
.addEventListener("change", function(e) { 
 
    document.querySelector("[for=" + e.target.id + "]") 
 
    .innerHTML = e.target.files[0].name; 
 
})

.inputfile { 
 
    width: 0.1px; 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<!-- Change Picture Form --> 
 
<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="/images/profile/upload.png" />Upload Picture... 
 
    </label> 
 
    <br> 
 
    <div class="button-wrap"> 
 
     <button>Change Picture</button> 
 
    </div> 
 
    </form> 
 
</div>