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

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


当前回答

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

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

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

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

其他回答

下面是一个用纯HTML和javascript“改变”文件类型输入文本的方法:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

只有CSS和bootstrap类

< =铁路”链接stylesheet " href = " https://cdn.jsdelivr.net/npm/bootstrap@4 6。0 /区/ css / min bootstrap。css”诚信=“sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L - Z6nronJ3oUOFUFpCjEUQouq2 + l”crossorigin =“匿名”> <div class="col-md-4 inputting -group"> <输入类别=“form控制”类型=“文本”/> < div级= input-group-btn”> <标签for=“文件” <输入id=“文件”类型=“文件”/> < / 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;
}

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

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

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

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

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