Измените "No file selected":

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

• Скройте ввод и добавьте кнопку "файлы".
• затем вызовите кнопку "файлы" и попросите его связать файловую загрузку (я использую 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;'>

Ответ 5

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

Ответ 7

Что-то вроде этого может работать

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

Ответ 8

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

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

Как это работает

Это очень просто. элемент Label использует тег "для" для ссылки на элемент формы по id. В этом случае мы использовали "img" в качестве эталонного ключа между ними. Как только это будет сделано, всякий раз, когда вы нажимаете на метку, он автоматически вызывает событие щелчка элемента формы, которое является событием щелчка элемента файла в нашем случае. Затем мы создаем невидимый элемент файла, используя display: none, а не видимость: скрытый, чтобы он не создавал пустое пространство.

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

Ответ 9

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

Ответ 10

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

Ответ 11

Вы можете попробовать это следующим образом:

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

Ответ 12

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.

Ответ 13

Это поможет вам изменить имя для "no file select to Select profile picture"

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

Ответ 14

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

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