Кнопка переименования из библиотеки по умолчанию - PullRequest
Новая
       4

Кнопка переименования из библиотеки по умолчанию

2 голосов
/ 04 июня 2019

Кто-нибудь знает, как изменить название кнопки «Выбрать файл» и «Файл не выбран», которая появляется на следующем изображении?

enter image description here

Похоже, это кнопка, которая по умолчанию поставляется с 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>

1 Ответ

1 голос
/ 04 июня 2019

Если я прав, текст на кнопке и рядом с ней зависит от языка браузера и самого браузера. Текст не может быть изменен.

Однако, используя JS и немного CSS, вы можете скрыть оригинальную кнопку, добавить свою собственную и «перенаправить» нажатие на фальшивую кнопку для фактического ввода файла.

Фрагмент ниже использует ванильный 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">

Фрагмент ниже использует 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();">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...