Изменить язык загрузки файлов язык CakePHP 3 [дублировать]

EDIT: теперь я вижу комментарии, которые вы спрашиваете о тексте кнопки, а не о пути файла. Виноват. Я оставлю свой первоначальный ответ ниже, если кто-то, кто наткнулся на этот вопрос, интерпретирует его так, как я изначально сделал.

2nd EDIT: я удалил этот ответ, потому что решил, что я неправильно понял этот вопрос и мой ответ не был уместным. Однако комментарии в другом ответе указывали на то, что люди все еще хотели увидеть этот ответ, поэтому я его отменяю.

МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ (я думал, что OP спрашивает о пути, а не о тексте кнопки):

Это свойство не поддерживается по соображениям безопасности . Веб-браузер Opera поддерживал это, но он был удален. Подумайте, что было бы возможно, если бы это было поддержано; Вы можете сделать страницу с файлом, загружающим вход, предварительно заполнить его с помощью пути к некоторому чувствительному файлу, а затем автоматически отправить форму с помощью javascript, вызванного событием onload. Это может произойти слишком быстро, чтобы пользователь мог что-то сделать.

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

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT: In IE9 и IE10, если вы активируете onClick в входе файла через javascript, форма будет помечена как «опасная» и не может быть отправлена ​​с помощью javascript, не уверен, что ее можно отправить традиционно.

Я думаю, что это то, что вы хотите:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 

Прекрасно работает на всех браузерах Надеюсь, что это сработает и для вас.

HTML: <input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Изменить content: 'Select some files'; с текстом, который вы хотите в ''

ЕСЛИ НЕ РАБОТАЕТ С firefox, тогда используйте это вместо ввода:

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Этот является плагином JQuery для изменения текста кнопки элемента входного файла.

Пример HTML:

<input type="file" id="choose-file" />

Пример JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Результат:

[/g1]

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

больше http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css /

Скрыть ввод файла. Создайте новый вход для захвата события щелчка и переместите его на скрытый вход:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

Это альтернативное решение, которое может вам помочь. Это скрывает текст, который появляется из кнопки, смешивая его с фоновым цветом div. Затем вы можете указать div, который вам нравится.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>

Только CSS & amp; bootstrap class

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

Используйте <label> для заголовка

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Это работает без javascript. Вы можете украсить ярлык до любой степени сложности, до вашего сердца. Когда вы нажимаете на метку, клик автоматически перенаправляется на вход файла. Сам ввод файла может быть невидимым любым способом. Если вы хотите, чтобы метка отображалась как кнопка, существует множество решений, например :

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Текст «загрузить файл ...» предварительно определен браузером и не может быть изменен. Единственный способ обойти это - использовать компонент загрузки на основе Flash или Java, например swfupload .

Используйте Bootstrap FileStyle , который используется для стилизации полей файлов форм. Это плагин для библиотеки компонентов на основе jQuery под названием Twitter Bootstrap

Пример использования:

Включить:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Через JavaScript:

$(":file").filestyle();

Через атрибуты данных:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

1. До этого <input type="file"> добавьте изображение, а <input style="position:absolute"> он займет пространство <input type="file">
2. . Используйте следующий CSS для элемента файла

   position:relative;  
   opacity:0;  
   z-index:99;
   

, если вы используете рельсы и имеете проблемы с этим, я хотел бы добавить несколько советов из оригинального ответа, отправленного @Fernando Kosh

• Скачать файл zip и скопировать файл bootstrap-filestyle.min.js ke папка app / assets / javascripts /
• откройте приложение application.js и добавьте эту строку ниже // = require bootstrap-filestyle.min
• open ваш кофе и добавьте эту строку $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: «Ваш текст здесь», значок: false});