Измените «Файл не выбран»:


90

У меня есть кнопка «Выбрать файл», как показано ниже (я использую Jade, но она должна быть такой же, как Html5):

 input(type='file', name='videoFile')

В браузере отображается кнопка с текстом рядом с ней «Файл не выбран». Я хотел бы заменить текст «Файл не выбран» на что-то другое, например «Видео не выбрано» или «Выберите видео, пожалуйста». Я последовал первым предложениям здесь:

Я не хочу видеть "файл не выбран" в поле ввода файла

Но это не изменило текст:

 input(type='file', name='videoFile', title = "Choose a video please")

Может ли кто-нибудь помочь мне разобраться, в чем проблема?



1
@MahmoudFarahat Я не хочу его удалять, я хочу изменить текст
FranXh

Разве вы не можете удалить текст и поставить рядом с ним метку-заполнитель?
Роджер Липскомб

В другом посте есть действительно хороший ответ. stackoverflow.com/a/21842275/3653494
P-Bagels

это очень возможно: ознакомьтесь с этим быстрым решением - включает в себя и другие вещи, просто прокрутите CSS вниз: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7
darga33

Ответы:


17

Я уверен, что вы не можете изменить метки по умолчанию на кнопках, они жестко запрограммированы в браузерах (каждый браузер по-своему отображает заголовки кнопок). Ознакомьтесь с этой статьей о стиле кнопок


6
Это не метка на кнопке, а надпись «Файл не выбран» рядом с ней. Когда я выбираю файл, он меняется с «Файл не выбран» на fileName.something. Так что я считаю, что его нужно менять.
FranXh

@JeremyThille, потому что люди есть люди.
атп

216

Скройте ввод с помощью css, добавьте метку и назначьте ее кнопке ввода. метка будет активна, и при нажатии она вызовет диалоговое окно файла.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Затем, если хотите, стилизуйте метку как кнопку.


1
Это работает даже в IE9, где вы не можете скрыть file inputи щелкнуть по нему в JavaScript. Благодарность!
huysentruitw

1
Это круто. Хакерская элегантность. Любить это.
Бен

3
Отличное решение, это должен быть принятый ответ.
Multitut

1
Отличное решение, оно даже позволяет легко настроить поле
SAFAD

8
Интересное html-решение, но плохое для удобства использования. Пользователь всегда будет видеть «Выбрать файл» или аналогичный, даже после выбора файла.
Cthulhu

26

Попробуйте это просто трюк

<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, чтобы он не создавал пустого пространства.

Наслаждайтесь кодированием


2
Вы можете улучшить этот ответ, объяснив, как он работает.
user8397947

Похоже, что при этом перетаскивание файлов не работает.
fonZ

16

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];
    }
};

13

Правильно, нет способа удалить это «файл не выбран», даже если у вас есть список файлов перед загрузкой.

Самое простое решение, которое я нашел (и работает в IE, FF, CR), - это следующее

  1. Скройте ввод и добавьте кнопку "файлы"
  2. затем вызовите кнопку «файлы» и попросите его привязать загрузку файла (в этом примере я использую JQuery)

$('.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;'>

Готово, работает отлично :)

Фред


7

$(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">


Это работает очень эффективно, он скроет текст рядом с вводом файла.
всегда ученик

6

Но если вы попытаетесь удалить эту подсказку

<input type='file' title=""/>

Это не сработает. Вот мой маленький трюк, чтобы поработать с этим, попробуйте заголовок с пробелом. Это будет работать.:)

<input type='file' title=" "/>

Я тестировал Chrome и все браузеры. Работает нормально. Не могли бы вы протестировать и проверить.
Саймон

4
Еще раз протестирован в Chrome, Safari, Firefox. Это не работает.
AdamInTheOculus

Я проверяю версию Chrome 56.0.2924.87, она работает отлично. Какую версию вы используете @PantsMagee?
симон

Он просто добавляет всплывающую подсказку с текстом, который вы установили в titleатрибуте, как я вижу
Федор


3

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.


3
 .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>


Как сделать так, чтобы текст «Выберите логотип компании» отображался под кнопкой, а не с правой стороны?
Alex

3

использование метки с измененным текстом метки

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

2

Просто измените ширину ввода. Около 90 пикселей

<input type="file" style="width: 90px" />


1
Это просто и нормально работает. Просто ширина 100 пикселей; :)
Сачин Шах

1
<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; 
}

1
input [type = "file"] {цвет: прозрачный; цвет фона: # F89406; граница: 2px solid # 34495e; ширина: 100%; высота: 36 пикселей; радиус границы: 3 пикселя; }
Ir Calif

1

Вы можете попробовать это так:

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


0

Это поможет вам изменить имя на «без файла выберите« Выбрать изображение профиля ».

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

кнопки больше нет.
Diansheng

это отлично сработало для меня. Кнопка исчезла, но щелкнув по метке, откройте диалоговое окно открытия файлов, и вы можете стилизовать метку, чтобы она выглядела как кнопка. Он избавился от надоедливого текста «Файл не выбран».
NoBullMan

0

Я бы использовал «кнопку» вместо «ярлык», надеюсь, это кому-то поможет.

Это просто отобразит кнопку, при нажатии пользователем появится всплывающее окно выбора файла, после выбора файла произойдет автоматическая загрузка.

<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;" />

0

вы можете использовать следующий код css, чтобы скрыть (файл не выбран)

HTML

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

CSS

input[type="file"]:after {color: #fff}

УБЕДИТЕСЬ, ЧТО ЦВЕТ СООТВЕТСТВУЕТ ЦВЕТУ ФОНА


-1

Есть хороший пример (который включает проверку типа файла) по адресу:

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>

Так почему это было отклонено? Возможно, потому, что в совершенно не относящемся к делу посте я предположил, что делать опускающие голоса проще простого, но гораздо труднее быть конструктивным?
DLyons
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.