Merci d'avoir regardé ma question.

J'ai posé une question similaire à celle-ci avant le lien ci-dessous. Malheureusement, la réponse donnée fonctionne dans l'extrait de code mais pas sur mon site. J'ai créé un document HTML vierge et y ai inséré le code suivant. Voici les bases de ce que j'essaie de faire. La balise d'entrée de fichier sera masquée à l'aide de CSS. J'utilise ensuite la balise label pour prendre le contrôle de la balise d'entrée. Une fois qu'un fichier est sélectionné, je veux que le nom du fichier (pas le chemin) soit affiché dans l'étiquette et que l'image soit également visible pour l'utilisateur. Comme indiqué précédemment dans ma dernière question, je ne souhaite PAS utiliser jQuery. Merci d'avance d'avoir regardé mon code et d'avoir aidé!

Voici ma question précédente: Comment modifier le texte de l'étiquette HTML une fois le fichier sélectionné à l'aide de Javascript

Voici le code dans mon fichier '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>
1
J. Robinson 8 août 2016 à 22:26

3 réponses

Meilleure réponse

Placez le <script>...</script> à la toute fin du document, juste avant </body>.

De cette façon, tous les DOM auront déjà été chargés et vous n'aurez pas besoin d'écouter un événement onload ou onDOMContentLoaded.

1
Rounin 8 août 2016 à 20:47

J'ai finalement avec l'aide d'autres personnes sur deux questions à la conclusion. Voici le code FINAL qui fonctionne sur n'importe quel navigateur. Merci à tous pour votre aide!

<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>
0
J. Robinson 8 août 2016 à 20:59

Revenons à votre question précédente et sa réponse. Je vois qu'il n'y a pas de vérification pour voir que le DOM a été chargé. Si vous avez copié et collé ce code dans la réponse, il n'y a aucun moyen que cela fonctionne sur votre site Web.

Essayez d'utiliser l'un de ces éléments:

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

Ou

window.onload = myFunction(); 

Ou

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

Je recommande la première option. Vous devrez encapsuler le code qui a été écrit pour vous à l'intérieur d'une fonction (comme myFunction ();), puis l'appeler à l'aide de l'une de ces méthodes. Sinon, le code essaie de faire des choses sur le DOM qui n'a pas encore été chargé.

À élaborer: Vous devez mettre votre code à l'intérieur de la fonction onload - peu importe le nom que vous lui donnez.

<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>
1
user3044394 8 août 2016 à 20:04