Question

我正在尝试用<label>中的所选文件名来更改<input type="file" />标记内的文本

我已经尝试过了，但是不起作用：

<!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

如何使用文件<input type =“ file” />更改<label>中的文本

解决：

1 个答案: