个人中心
gpt4 book ai didi

javascript - 更改 "Choose File"按钮并继续显示文件名

转载 作者：行者123 更新时间：2023-11-28 05:05:56 25 4
gpt4 key购买 nike

这是一个老问题，但我还没有找到满足我需要的解决方案。

首先，我想将 Choose File 更改为另一种按钮样式(例如，btn btn-primary)。其次，选择一个文件后，我仍然希望它的名字显示在屏幕上，以便人们知道选择了什么。

我在 Chrome 53.0.2785.116 中尝试了两种解决方案。它们确实更改了 Choose File 的文本，而它们都没有显示文件名作为响应:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function performClick(elemId) {
      var elem = document.getElementById(elemId);
      if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
      }
    }
  </script>
</head>
<body>
  <form action="uploadfile.php" method="post" enctype="multipart/form-data">

    <!-- http://stackoverflow.com/a/16015086/702977 -->
    <a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;">Browse</a> <input id="file" name="file" type="file" style="visibility: hidden; display: none;" />

    <!-- http://stackoverflow.com/a/6463467/702977 -->
    <!-- <a href="#" class="btn btn-primary" type="button" onclick="performClick('file');">Choose File</a><input type="file" name="file" id="file" style="position: fixed; top: -100em" />-->

    <input type="submit" id="u_button" name="u_button" value="Upload the file">
  </form>
</body>
</html>

这里是 JSBin

有人有解决办法吗？我也对非纯 HTML 解决方案(例如 JQuery)持开放态度...

最佳答案

您可以创建一个函数来处理 change事件地点 <input type="file">元素，创建一个 <label>带有 for 的元素属性设置为 input type="file" id , 设置 .webkitRelativePath的 File对象，File对象 .name或 .value input的属性(property)元素，从最后切片 \字符到字符串结尾，设置.innerHTML的 <label>结果字符串的元素

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  	  <script type="text/javascript">
	    function performClick(elemId) {
	    var elem = document.getElementById(elemId);
	    if(elem && document.createEvent) {
	    var evt = document.createEvent("MouseEvents");
	    evt.initEvent("click", true, false);
	    elem.dispatchEvent(evt);
	    }
	    }
        
        function handleFile(elem) {
          console.log(elem.files[0].name, elem.value);
          document.querySelector("[for='file']")
          .innerHTML = elem.files[0].webkitRelativePath 
                       || elem.files[0].name
                       || elem.value.slice(
                           elem.value.lastIndexOf("\\") + 1
                          );
        }
	  </script>
</head>
<body>
  <form action="uploadfile.php" method="post" enctype="multipart/form-data">
    
    <!-- http://stackoverflow.com/a/16015086/702977 -->
    <a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;">Browse</a> <input id="file" name="file" type="file" style="visibility: hidden; display: none;" onchange="handleFile(this)" />
    
    <!-- http://stackoverflow.com/a/6463467/702977 -->
    <!-- <a href="#" class="btn btn-primary" type="button" onclick="performClick('file');">Choose File</a><input type="file" name="file" id="file" style="position: fixed; top: -100em" />-->

	<input type="submit" id="u_button" name="u_button" value="Upload the file"><label for="file"></label>
  </form>
</body>
</html>

关于javascript - 更改 "Choose File"按钮并继续显示文件名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39822896/

25 4 0
文章推荐： javascript - 如何在JS中使用ajax请求的结果？
文章推荐： javascript - 使用 javascript 编辑图像
文章推荐： Javascript重定向无限循环
文章推荐： php - 如何使从数据库中抓取的链接显示为可点击的事件链接？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com