file样式修改

最新推荐文章于 2023-05-18 23:18:21 发布

小_小码农

最新推荐文章于 2023-05-18 23:18:21 发布

阅读量738

点赞数

分类专栏：前端开发文章标签： file样式修改

本文链接：https://blog.csdn.net/weixin_41846551/article/details/98390844

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

采用js和jQuery修改type="file"的样式

采用<input type="file">的默认样式在不同浏览器的是有所区别的，如：
谷歌浏览器的样式：
在这里插入图片描述
IE浏览器的样式：

有什么方法修改默认的样式使它在不同浏览器的样式显示效果是一样的呢？上网找到的答案都是没有从本质上修改该样式的方法，那么自己写一个代替它呗！采用js和jQuery来修改（如果有大佬直接用css实现出来不妨分享出来让我膜拜一下，现在我还是有点菜）。自己写的样式那么在不同的浏览器的显示效果肯定是一样的。采用谷歌浏览器相似的效果作为目标。

代码实现

<!DOCTYPE html>
<html>
<head>
	<title>file样式修改</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>	<!--必要的-->		
	<style type="text/css">
		html,body{ width: 100%; margin: 0; padding: 0;}
	</style>
</head>
<body>
	<div>
		<!--因为样式是我们自己写的，所以将默认的样式不显示-->
		<input type="file" name="file" id="file" style="display: none;">
		<div>
			<img style="vertical-align: middle; cursor: pointer;" src="添加文件icon.png" onclick="document.getElementById('file').click()">
			<span id="filename" style="cursor: pointer;" onclick="document.getElementById('file').click()">未选择任何文件</span>
		</div>
	</div>
	<script type="text/javascript">
		// 监听文件选择输入，选择文件后会自动触发change()方法
        $('#file').change(function(){
            // 获取选择文件输入的路径value
            var filePath = $(this).val();   
            if(filePath == ''){
	              alert('你还没选择文件！');
	              $('#filename').html('未选择任何文件'); // 未选择文件
	              return ;
            }
            var arr = filePath.split("\\"); // 将路径以‘\’进行分割
            var fileName = arr[arr.length-1]; // 最后一个数组元素即为文件名+后缀
            $('#filename').html(fileName);  // 选中了文件，显示文件名
        })
	</script>
</body>
</html>

效果

完成了样式修改后就可以在不同浏览器显示同一效果了
在这里插入图片描述

小_小码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
file样式修改

采用js和jQuery修改type="file"的样式采用<input type="file">的默认样式在不同浏览器的是有所区别的，如：谷歌浏览器的样式：IE浏览器的样式：有什么方法修改默认的样式使它在不同浏览器的样式显示效果是一样的呢？上网找到的答案都是没有从本质上修改该样式的方法，那么自己写一个代替它呗！采用js和jQuery来修改（如果有大佬直接用css实现出来不妨...
复制链接

扫一扫