修改input type=file 标签默认样式的简单方法

最新推荐文章于 2023-07-12 16:35:20 发布

原创最新推荐文章于 2023-07-12 16:35:20 发布 · 8.4k 阅读

2 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

32 篇文章

订阅专栏

JQUERY

26 篇文章

订阅专栏

本文介绍了一种通过隐藏HTML中的文件上传按钮并使用自定义按钮触发文件选择的方法，实现了美观且功能完整的文件上传功能。具体步骤包括设置文件输入框为不可见，然后通过JavaScript绑定自定义按钮的点击事件来触发文件选择对话框，并在文件发生变化时提交表单。

<html>
<head>
<title></title>
</head>
<body>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile" style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>
<input type="button" value="上传" id="btn"/>
</body>
<script src="jquery183.min.js"></script>
<script type="text/javascript">
$(function () {
//按钮的点击事件
$('#btn').click(function () {
//触发file的点击事件
$('#uploadFile').click();
});
//file的change事件
$('#uploadFile').change(function () {
//提交form表单的数据
$('#uploadForm').submit();
　　　　　　　　　//清空file标签的value，否则再次提交此文件时，onchange事件就不触发了
　　　　　　　　　$('#uploadFile').val('');
　　　　　　　　});
　　　　});
</script>
</html>