У меня есть кнопка «Выбрать файл», как показано ниже (я использую Jade, но она должна быть такой же, как Html5):
input(type='file', name='videoFile')
В браузере отображается кнопка с текстом рядом с ней «Файл не выбран». Я хотел бы заменить текст «Файл не выбран» на что-то другое, например «Видео не выбрано» или «Выберите видео, пожалуйста». Я последовал первым предложениям здесь:
Я не хочу видеть "файл не выбран" в поле ввода файла
Но это не изменило текст:
input(type='file', name='videoFile', title = "Choose a video please")
Может ли кто-нибудь помочь мне разобраться, в чем проблема?
html
button
file-upload
pug
FranXh
источник
источник
Ответы:
Я уверен, что вы не можете изменить метки по умолчанию на кнопках, они жестко запрограммированы в браузерах (каждый браузер по-своему отображает заголовки кнопок). Ознакомьтесь с этой статьей о стиле кнопок
источник
Скройте ввод с помощью css, добавьте метку и назначьте ее кнопке ввода. метка будет активна, и при нажатии она вызовет диалоговое окно файла.
<input type="file" id="files" class="hidden"/> <label for="files">Select file</label>
Затем, если хотите, стилизуйте метку как кнопку.
источник
file input
и щелкнуть по нему в JavaScript. Благодарность!Попробуйте это просто трюк
<input type="file" name="uploadfile" id="img" style="display:none;"/> <label for="img">Click me to upload image</label>
Как это работает
Все очень просто. элемент Label использует тег for для ссылки на элемент формы по идентификатору. В этом случае мы использовали «img» в качестве ссылочного ключа между ними. Как только это будет сделано, всякий раз, когда вы нажимаете на ярлык, он автоматически запускает событие щелчка элемента формы, которое в нашем случае является событием щелчка элемента файла. Затем мы делаем элемент файла невидимым, используя display: none и not visibility: hidden, чтобы он не создавал пустого пространства.
Наслаждайтесь кодированием
источник
http://jsfiddle.net/ZDgRG/
См. Ссылку выше. Я использую css, чтобы скрыть текст по умолчанию, и использую метку, чтобы показать то, что я хочу:
<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div> input[type=file]{ width:90px; color:transparent; } window.pressed = function(){ var a = document.getElementById('aa'); if(a.value == "") { fileLabel.innerHTML = "Choose file"; } else { var theSplit = a.value.split('\\'); fileLabel.innerHTML = theSplit[theSplit.length-1]; } };
источник
Правильно, нет способа удалить это «файл не выбран», даже если у вас есть список файлов перед загрузкой.
Самое простое решение, которое я нашел (и работает в IE, FF, CR), - это следующее
$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button> <input id="fileupload" type="file" name="files[]" multiple style='display: none;'>
Готово, работает отлично :)
Фред
источник
$(function () { $('input[type="file"]').change(function () { if ($(this).val() != "") { $(this).css('color', '#333'); }else{ $(this).css('color', 'transparent'); } }); })
input[type="file"]{ color: transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="app_cvupload" class="fullwidth input rqd">
источник
Но если вы попытаетесь удалить эту подсказку
<input type='file' title=""/>
Это не сработает. Вот мой маленький трюк, чтобы поработать с этим, попробуйте заголовок с пробелом. Это будет работать.:)
<input type='file' title=" "/>
источник
title
атрибуте, как я вижуЧто-то вроде этого могло сработать
input(type='file', name='videoFile', value = "Choose a video please")
источник
HTML
<div class="fileUpload btn btn-primary"> <label class="upload"> <input name='Image' type="file"/> Upload Image </label> </div>
CSS
input[type="file"] { display: none; } .fileUpload input.upload { display: inline-block; }
Примечание. Btn btn-primary - это класс кнопки начальной загрузки. Однако кнопка может выглядеть неаккуратно. Надеюсь, вы сможете исправить это с помощью встроенного CSS.
источник
.vendor_logo_hide{ display: inline !important;; color: transparent; width: 99px; } .vendor_logo{ display: block !important; color: black; width: 100%; }
$(document).ready(function() { // set text to select company logo $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>"); // on change $('#Uploadfile').change(function() { // show file name if ($("#Uploadfile").val().length > 0) { $(".file_placeholder").empty(); $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo'); console.log($("#Uploadfile").val()); } else { // show select company logo $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide'); $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>"); } }); });
.vendor_logo_hide { display: inline !important; ; color: transparent; width: 99px; } .vendor_logo { display: block !important; color: black; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'> <span class="fa fa-picture-o form-control-feedback"></span> <div> <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p> </div>
источник
использование метки с измененным текстом метки
<input type="file" id="files" name="files" class="hidden"/> <label for="files" id="lable_file">Select file</label>
добавить jquery
<script> $("#files").change(function(){ $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file"); }); </script>
источник
Просто измените ширину ввода. Около 90 пикселей
<input type="file" style="width: 90px" />
источник
<div class="field"> <label class="field-label" for="photo">Your photo</label> <input class="field-input" type="file" name="photo" id="photo" value="photo" /> </div>
и CSS
input[type="file"] { color: transparent; background-color: #F89406; border: 2px solid #34495e; width: 100%; height: 36px; border-radius: 3px; }
источник
Вы можете попробовать это так:
<div> <label for="user_audio" class="customform-control">Browse Computer</label> <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span> <span id='button'>Select File</span> </div>
Чтобы показать выбранный файл:
$('#button').click(function () { $("input[type='file']").trigger('click'); }) $("input[type='file']").change(function () { $('#val').text(this.value.replace(/C:\\fakepath\\/i, '')) $('.customform-control').hide(); })
Спасибо @ unlucky13 за получение выбранного имени файла
Вот рабочая скрипка:
http://jsfiddle.net/eamrmoc7/
источник
Это поможет вам изменить имя на «без файла выберите« Выбрать изображение профиля ».
<input type='file'id="files" class="hidden"/> <label for="files">Select profile picture</label>
источник
Я бы использовал «кнопку» вместо «ярлык», надеюсь, это кому-то поможет.
Это просто отобразит кнопку, при нажатии пользователем появится всплывающее окно выбора файла, после выбора файла произойдет автоматическая загрузка.
<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button> <asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" /> <asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
источник
вы можете использовать следующий код css, чтобы скрыть (файл не выбран)
HTML
<input type="file" name="page_logo" id="page_logo">
CSS
input[type="file"]:after {color: #fff}
УБЕДИТЕСЬ, ЧТО ЦВЕТ СООТВЕТСТВУЕТ ЦВЕТУ ФОНА
источник
Есть хороший пример (который включает проверку типа файла) по адресу:
https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html
По сути, это доработанная версия идеи Амоса об использовании кнопки.
Я безуспешно пробовал несколько из приведенных выше предложений (но, возможно, это я).
Я переделываю его для преобразования файла Excel с помощью
<form> <div> <label for="excel_converts">Choose a spreadsheet to convert.</label> <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" > </div> <div class="preview"> <p>No spreadsheet currently selected for conversion</p> </div> <div> <button>Submit</button> </div> </form>
источник