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

最新推荐文章于 2023-02-24 16:07:33 发布
最新推荐文章于 2023-02-24 16:07:33 发布
阅读量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 调取手机照相机和选择照片上传
12-17
在移动设备上，HTML5 的 `input type="file"` 是一个关键元素，它允许用户从他们的设备中选择文件，包括照片，以便上传到网站或应用。这个特性在现代Web开发中非常常见，尤其是在构建响应式网页和混合应用程序时。...
input[type=file]如何屏蔽“未选择任何文件”自带文字提示
z_星河的博客
02-24 2580
铁子们，咱就是说有没有遇见过着坑人的input标签（关于file文件上传）自带的"未选择任何文字"，，就很烦，又刚好碰到相关项目需要文件上传，，看到提示问能将其改成英文版本提示吗？？？好嘛，那我还不如直接把它去掉你看不见也不用要求把文字改成英文了。。。
HTML JS 自定义input文件上传 file的提示文字及样式,Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载
yunnuo的博客
06-23 2656
HTML JS 自定义input文件上传 file的提示文字及样式 Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载
input[type=file]去掉“未选择任何文件”及样式改进
leveretz的博客
11-13 3337
input[type=file]去掉“未选择任何文件”及样式改进
html file 按钮更改显示文字问题
热门推荐
李古拉雷
02-18 1万+
在做上传时，file 按钮在部分浏览器下显示的是英文 "submit..." 通过程序把显示文字替换成了预想的。但测试时发现只能在 fiefox 浏览器正常运行。在 IE,chrome等浏览器下有安全方面的限制不能正常提交表单。 替换程序如下：
改变文件上传框（input type=file）的大小
Tizzy_Joel的专栏
03-22 6729
用css属性： font-size: 37px，用width属性无效。 ps:在ie8下，双击文本框或单击浏览键可浏览选择文件。 在ff下，单击文本框或浏览键可浏览选择文件。
自定义 input: file 宽度和高度
我的地盘
03-19 1万+
在使用  这个控件的时候，会发现在ie,firefox,chrome下表现的都不一致。而且不可以设置它的width。 基于上面的原因，我们只能自己加工一下这个上传控件了，并且各个浏览器兼容。 HTML： 建立一个透明的file控件，让后将这个file控件定位到页面上上传的botton上面。 CSS： 设置透明度和相对定位我们
php设置表单的字体,修改file表单按钮样式，把文字：浏览..修改成自己喜欢的样式或其他文字...
weixin_39860919的博客
03-09 179
由于file类型的表单会自动生成一个文字为浏览..的按钮，并且这个按钮的文字不能改变，如果我想改变这个file input框的表现形式或者希望改变这个按钮的文字应该怎么办呢？我首先想到的，也是最简单的方式就是把这个file input框隐藏，然后建多一个按钮，点击按钮的时候触动file 的click事件，这个方式再ie下可以，在火狐下就没效果。另外几种种比较常用的方式就可以解决浏览器兼容的问题，下...
改变文本选择框的默认样式
maxue20161025的博客
11-30 1031
文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。如果大家希望隐藏按钮后面的“未选择任何文件”的文字，可以对当前。伪元素应运而生，专门匹配文件选择输入框样式中的按钮。
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"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
用JS实现input中的file标签的样式（当要修改file标签的字体样式时使用）
今夕莫离-IT
07-01 5804
实现步骤:1.创建一个input file标签，并设置该标签为隐藏的； eg:input type="file" id="file1" name="file1" style="display:none"/> 2.创建一个input text标签，来显示选中的文件路径； eg:input type="text" value="未选择文件" id
html input 按钮file属性更改显示文字问题（确保有效）
qq_51901495的博客
06-21 6735
html中用input上传文件替换自带文字问题
input type='file' 上传文件时显示文件名及上传进度
Eva_大黎的博客
11-16 1万+
1、input type='file' 上传文件时显示文件名及上传进度 function showPreview(source) { var arrs = $(source).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename); var file = source.
input上传文件时的显示文字
登峰小蚁
07-13 8666
    这个文字是各个浏览器不一样的，Chrome是“选择文件”，FireFox是“浏览”。。因为这个是一个浏览器内部的决定，无法更改。想要改的话就弄一个隐藏的file input，显示的是一个常规的input和一个button，这样直接修改button的名称就可以了，然后button的click指向隐藏的file的excute之类，再将file中的路径名贴到常规input上来，简单来说就是模仿一...
input [type=file]去掉未选择文件的提示
8月13日
02-25 1207
使用file的文件会有提示，如何去掉提示 加上这行代码： 反正只要看不到不久好了 在修改一下尺寸，完事，下班
修改 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、付费专栏及课程。

余额充值