修改HTML中input标签的type=file的默认文字提示信息和文本框自动调整宽度

最新推荐文章于 2022-11-30 10:07:27 发布
最新推荐文章于 2022-11-30 10:07:27 发布
阅读量1.2w 收藏 6
点赞数 1
分类专栏： input type=file 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45084543/article/details/106499946
版权

通过两个input标签绑定type=file的input标签，实现修改文件标签的默认提示信息，并且根据文件名称的字符数自动调整文本框的宽度。

效果如下：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
最低0.47元/天 解锁文章
霸霸杨
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用input[type=”file”]实现文件上传功能
12-29
input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,...
input[type=file]如何屏蔽“未选择任何文件”自带文字提示
z_星河的博客
02-24 2580
铁子们，咱就是说有没有遇见过着坑人的input标签（关于file文件上传）自带的"未选择任何文字"，，就很烦，又刚好碰到相关项目需要文件上传，，看到提示问能将其改成英文版本提示吗？？？好嘛，那我还不如直接把它去掉你看不见也不用要求把文字改成英文了。。。
input[type=file]去掉“未选择任何文件”及样式改进
leveretz的博客
11-13 3337
input[type=file]去掉“未选择任何文件”及样式改进
HTML JS 自定义input文件上传 file的提示文字及样式,Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载
yunnuo的博客
06-23 2658
HTML JS 自定义input文件上传 file的提示文字及样式 Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载
html file 按钮更改显示文字问题
李古拉雷
02-18 1万+
在做上传时，file 按钮在部分浏览器下显示的是英文 "submit..." 通过程序把显示文字替换成了预想的。但测试时发现只能在 fiefox 浏览器正常运行。在 IE,chrome等浏览器下有安全方面的限制不能正常提交表单。 替换程序如下：
HTML的input[type=file]样式更改
qq_41672428的博客
08-03 3819
input标签的file属性，在没有选择文件的情况下，默认显示一条文字“未选择任何文件”。 通过label标签绑定input标签，然后隐藏input，添加button和span来自定义提示语： css部分： <style> label{ position: relative; } #img{ position: absolute; left: 0; t...
改变文件上传框（input type=file）的大小
Tizzy_Joel的专栏
03-22 6730
用css属性： font-size: 37px，用width属性无效。 ps:在ie8下，双击文本框或单击浏览键可浏览选择文件。 在ff下，单击文本框或浏览键可浏览选择文件。
input的file组件按钮上默认文字的修改
热门推荐
北极光的博客
09-10 3万+
表单里用于上传的file组件上面，默认的是中文的“浏览”两个字，但是做英文或是其他外文网页的时候，页面上出现两个中文字看着比较别扭，找了找，没有什么直接的办法，只能用文本框和按钮来模拟，不过还是挺好用的：
修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题
笑到世界都狼狈的博客
04-21 1948
**今天来和大家分享一下input type="file"的默认样式修改相关问题** 首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的，而且很丑，相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题： 1.隐藏input，用label代替input标签显示在页面上，代码如下： <style type="te...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
这里，我们用两个嵌套的`<span>`标签，外层的`<span>`作为容器，内层的`<span>`包含文字"上传"，而`<input type="file">`元素则被放在内层`<span>`之后。这样布局的原因是，由于在某些旧版本的IE浏览器中，非`inline...
css input[type=file] 样式美化(input上传文件样式 )
09-24
`input[type=file]` 是HTML中用于创建文件上传功能的元素，但默认情况下，它的样式比较朴素，不符合现代网页的美观要求。本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站...
vue中使用input[type="file"]实现文件上传功能
10-18
主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
input type=file 调取手机照相机和选择照片上传
12-17
在移动设备上，HTML5 的 `input type="file"` 是一个关键元素，它允许用户从他们的设备中选择文件，包括照片，以便上传到网站或应用。这个特性在现代Web开发中非常常见，尤其是在构建响应式网页和混合应用程序时。...
自定义 input: file 宽度和高度
我的地盘
03-19 1万+
在使用  这个控件的时候，会发现在ie,firefox,chrome下表现的都不一致。而且不可以设置它的width。 基于上面的原因，我们只能自己加工一下这个上传控件了，并且各个浏览器兼容。 HTML： 建立一个透明的file控件，让后将这个file控件定位到页面上上传的botton上面。 CSS： 设置透明度和相对定位我们
改变文本选择框的默认样式
maxue20161025的博客
11-30 1031
文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。如果大家希望隐藏按钮后面的“未选择任何文件”的文字，可以对当前。伪元素应运而生，专门匹配文件选择输入框样式中的按钮。
php设置表单的字体,修改file表单按钮样式，把文字：浏览..修改成自己喜欢的样式或其他文字...
weixin_39860919的博客
03-09 179
由于file类型的表单会自动生成一个文字为浏览..的按钮，并且这个按钮的文字不能改变，如果我想改变这个file input框的表现形式或者希望改变这个按钮的文字应该怎么办呢？我首先想到的，也是最简单的方式就是把这个file input框隐藏，然后建多一个按钮，点击按钮的时候触动file 的click事件，这个方式再ie下可以，在火狐下就没效果。另外几种种比较常用的方式就可以解决浏览器兼容的问题，下...
input提升用户输入信息 当用户点击时 页面消失
itinglight的博客
08-20 756
方案二 <input type="text" placeholder="请输入内容"> 方案一 <input type="text" value='请输入内容' onfocus="javascript:if(this.value=='请输入内容')this.value='';"> 1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果 2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失 3、js 方式添加的提示文字，当光标定位到.
修改 html file 文字,修改input标签type=file类型的文字
最新发布
05-13
要修改HTML文件中input标签type=file类型的文字，可以使用以下步骤： 1. 打开HTML文件，找到需要修改的input标签。 2. 在input标签中添加一个label标签，用于显示修改后的文字。 3. 将input标签的type属性设置为hidden，这样用户就看不到上传文件的按钮了。 4. 在label标签中添加一个点击事件，用于触发input标签的点击事件。 5. 在点击事件中使用JavaScript代码来修改input标签的文字。 以下是一个示例代码： ```html <label for="file-input">选择文件</label> <input id="file-input" type="file" style="display: none;"> <script> document.querySelector('label[for="file-input"]').addEventListener('click', function () { document.getElementById('file-input').click(); }); document.getElementById('file-input').addEventListener('change', function () { var files = this.files; if (files.length > 0) { var fileName = files[0].name; document.querySelector('label[for="file-input"]').textContent = fileName; } }); </script> ``` 在这个代码中，我们首先创建了一个label标签，用于显示修改后的文字。然后，我们创建了一个input标签，将其type属性设置为hidden，这样用户就看不到上传文件的按钮了。 接着，我们使用JavaScript代码来为label标签添加一个点击事件。当用户点击label标签时，我们触发input标签的点击事件，让用户选择文件。 最后，我们为input标签添加一个change事件，当用户选择文件后，我们获取文件名，并将其设置为label标签的内容。这样，用户就能看到选择的文件名了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值