<input type="file" value="Browse" name="avatar" id="id_avatar" />

我试图修改该值,但它不起作用。如何自定义按钮文本?


当前回答

对我来说,它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰,但文本是奇怪的改变,在与css摔跤之前,我尝试以下:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap- filstyle使用名为buttontext的类将组件渲染为span,因此当文档加载时只需更改文本。很简单,它必须在所有浏览器上工作。

干杯

其他回答

编辑:我现在看到的评论,你是关于按钮文本,而不是文件路径。我的坏。我将把我最初的答案留在下面,以防其他人偶然发现这个问题,以我最初的方式解释它。

我删除了这个答案,因为我认为我误解了这个问题,我的答案是不相关的。然而,另一个答案中的评论表明,人们仍然想看到这个答案,所以我将其删除。

我最初的回答(我以为OP是在问路径,而不是按钮文本):

出于安全原因,该特性不受支持。Opera网络浏览器曾经支持这一点,但它被删除了。想想如果这得到支持会发生什么;您可以创建一个带有文件上传输入的页面,用一些敏感文件的路径预先填充它,然后使用onload事件触发的javascript自动提交表单。这将发生得太快,用户无法对此采取任何措施。

在Bootstrap +4.5中,你可以简单地将这个添加到你的代码中:

.custom-file-input ~。{后custom-file-label:: 内容:“您的自定义文本…”; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="匿名"> < div class = "定义文件”> <input type="file" class="custom-file-input"> <label class="custom-file-label">自定义占位符 < / div >

对我来说,它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰,但文本是奇怪的改变,在与css摔跤之前,我尝试以下:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap- filstyle使用名为buttontext的类将组件渲染为span,因此当文档加载时只需更改文本。很简单,它必须在所有浏览器上工作。

干杯

你可以放一张图片,像这样做:

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

警告: 在IE9和IE10中,如果你通过javascript触发文件输入中的onClick,表单将被标记为“危险”,不能用javascript提交,不确定它是否可以传统地提交。

在所有浏览器上都能完美工作,希望它也能为你工作。

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

更改内容:“选择一些文件”;里面有你想要的文本

如果不与firefox工作,然后使用这个而不是输入:

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

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