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

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


当前回答

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

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

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

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

其他回答

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

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提交,不确定它是否可以传统地提交。

使用Bootstrap FileStyle,它用于样式化表单的文件字段。它是一个名为Twitter Bootstrap的基于jquery的组件库的插件

示例用法:

包括:

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

我知道,没有人要求它,但如果有人使用bootstrap,它可以通过标签和CSS伪选择器改变。

更改按钮文本:

.custom-file-label::after {
  content: "What's up?";
}

更改字段文本:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

这是小提琴。

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

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

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

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

在<input type="file">之前,添加一个图像,并且<input style="position:absolute">,它将占据<input type="file">的空间 对file元素使用下面的CSS 位置:相对; 透明度:0; z - index: 99;