如何<label>使用文件名</label>更改里面<label>的</label>文本<label><input type="file" /></label>

Question

我正在嘗試使用<input type="file" />所選文件的名稱更改<label>標簽內的文本

我試過這個，但它不起作用：

<!DOCTYPE html>
<html>    
  <head>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $('#files').on("change",function() {
        console.log("change fired");
        var i = $(this).prev('label').clone();
        var file = $('#files')[0].files[0].name;
        console.log(file);
        $(this).prev('label').text(file);        
      });
    </script>
  </head>
  <body>
    <div class="upload_firmware_container">
      Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>              
      <!-- action="/doUpdate" -->
      <form method="POST" enctype="multipart/form-data">
        <label class="file_input_label" for="files">Browse files</label>
        <input id="files" type="file" name="update">
        <input class="upload_button" type="submit" name="getUpdate" value="Update">
      </form>
    </div>
  </body>
</html>

如您所見，我有 2 個腳本源。 第一個是本地的，它適用於我所有的小腳本。 我添加了第二個，因為我在我受到啟發的示例中找到了它。

你怎么認為？ 歡迎使用 jQuery。

解決：

它不起作用，因為腳本必須在相關元素之后。 在HTML頁面的末尾移動腳本解決了所有問題。

Answer 1

原因是因為 html 從上到下加載，並且您的代碼在頁面上加載任何元素之前運行腳本。

一種解決方案：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
  Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
  <!-- action="/doUpdate" -->
  <form method="POST" enctype="multipart/form-data">
    <label class="file_input_label" for="files">Browse files</label>
    <input id="files" type="file" name="update">
    <input class="upload_button" type="submit" name="getUpdate" value="Update">
  </form>
</div>
</body>
<script>
  $('#files').on("change",function() {
    console.log("change fired");
    var i = $(this).prev('label').clone();
    var file = $('#files')[0].files[0].name;
    console.log(file);
    $(this).prev('label').text(file);
  });
</script>
</html>

更多解決方案參考這篇文章： stackoverflow.com

如何<label>使用文件名</label>更改里面<label>的</label>文本<label><input type="file" /></label>

問題描述

解決：

1 個解決方案

解決方案1
1 已采納 2019-07-09 14:33:48

如何<label>使用文件名</label>更改里面<label>的</label>文本<label><input type="file" /></label>

問題描述

解決：

1 個解決方案

解決方案1 1 已采納 2019-07-09 14:33:48

解決方案1
1 已采納 2019-07-09 14:33:48