从默认库重命名按钮答案

【问题标题】：Rename button from default library从默认库重命名按钮
【发布时间】：2019-06-04 19:10:31
【问题描述】：

有谁知道如何更改下图中出现的“选择文件”和“未选择文件”按钮的名称？

它似乎是一个默认来自 googleapis.com 的按钮。我不能把名字改成英文，你能帮我吗？谢谢。

是否有相同的按钮，但是是英文的？

这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <div align="center">
        <label class="selectCSV">Select the CSV file:</label>
        <input type="file" name="file" />
        <br/><br/>
        <input type="submit" name="submit_exercises" value="Import" class="btn btn-info" />
    </div>
</form>
</body>
</html>

【问题讨论】：

Labeling file upload button的可能重复
我想你说的是file input type。另见：stackoverflow.com/questions/572768/…
您无法更改文本。您将不得不使用 JS / jQuery 来完成它

标签： php input

【解决方案1】：

如果我是正确的，按钮上和旁边的文本取决于浏览器的语言和浏览器本身。文字无法更改。

但是，通过使用 JS 和一些 CSS，您可以隐藏原始按钮，添加您自己的按钮并将假按钮上的点击“重定向”到实际的文件输入。

下面的 sn-p 使用 vanilla JavaScript，不显示文件名。

document.getElementById('fakeButton').addEventListener('click', redirectToFileInput);

function redirectToFileInput () {
  document.getElementById('fileInput').click();
}

#fileInput {
  display:none;
}

<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText">

下面的sn-p利用jQuery，在上传窗口中选择后显示文件名。

$(document).on('click', '#fakeButton', function(event) { 
    event.preventDefault(); 
    $("#fileInput").click(); 
});

$("#fileInput").change(function(){
  $("#fileName").text(" " + $('input[type=file]')[0].files[0].name);
});

#fileInput {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText"><span id="fileName"> No file uploaded.</span>

编辑： 原生 javascript 答案的更清洁解决方案。

#fileInput {
  display:none;
}

<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText" onclick="document.getElementById('fileInput').click();">

【讨论】：