关于css input[type=file] 样式美化，change事件怎么写？
最近网上学习只做了一个织梦表单。
按照教程修改了[type=file] 样式美化后，上传图片没有显示文件名。
于是按照教程修改了上传样式。
教程：
css input[type=file] 样式美化，input上传按钮美化_梦华空影的博客-CSDN博客_input type=file 美化 我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？ 思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构： https://blog.csdn.net/cuilei210/article/details/78842231
最后一步，change事件没有代码格式，这一步怎么编写代码呢？请师傅指教：
美化后显示文件名
上面美化，把默认显示的文件名也给隐藏掉了，那么如何显示文件名称呢？没关系，我们可以用jquery来获取文件的文件名。
我们可以写个change事件？change事件怎么写？
$(".a-upload").on("change","input[type='file']",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);
}else{
$(".showFileName").html("");
$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
参考文章的html结构少了 .fileerrorTip 和 .showFileName 这2个样式的容器，所以没反应。使用下面的代码就可以了，同时修改了示例代码存在多个上传控件统一设置内容的bug，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
<style>
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
<span class="fileerrorTip"></span>
<span class="showFileName"></span>
</a>
<a href="javascript:;" class="file">
选择文件
<input type="file" name="" id="">
<span class="fileerrorTip"></span>
<span class="showFileName"></span>
</a>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".a-upload,.file").on("change", "input[type='file']", function () {
var el = $(this), filePath = el.val(), p = el.parent();;
if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
p.find(".fileerrorTip").html("").hide();
var arr = filePath.split('\\');
var fileName = arr[arr.length - 1];
p.find(".showFileName").html(fileName);
} else {
p.find(".showFileName").html("");
p.find(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
</script>
$(".a-upload").on("change",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);
}else{
$(".showFileName").html("");
$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
你的on事件写错了吧。选择器写在前面。
示例是居于jquery的，需要导入jquery中，而且代码需要放到dom对象下面，如果放dom对象上面要将代码放到$(function(){....................})里面，要不直接执行找不到dom，代码改下面的
<!DOCTYPE html>
<!-- saved from url=(0053)http://a.gxycedu.cn/home/index_fulltime.html?userid=8 -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<base href="http://a.gxycedu.cn/">-->
<base href=".">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
</head>
<script src="./2021crgk/yiminit.js.下载"></script>
<form action="/th/plus/diy.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="2" />
<input type="hidden" name="do" value="2" />
<div class="apply_item">
<div class="item_name">身份证反面</div>
<a href="javascript:;" class="a-upload">
<input type='file' name='gktuf' id='gktuf' />点击这里上传图片
<span class="fileerrorTip"></span>
<span class="showFileName"></span>
</a>
</div>
</form>
<!----要导入jquery，并且代码放dom对象下，不知道你的yiminit.js.下载这是什么文件，如果是其他js文件要去掉.其他后缀 要去掉，要不发布后web服务器没有对应mime会出错----->
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".a-upload").on("change", "input[type='file']", function () {
var filePath = $(this).val();
if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
$(".fileerrorTip").html("").hide();
var arr = filePath.split('\\');
var fileName = arr[arr.length - 1];
$(".showFileName").html(fileName);
} else {
$(".showFileName").html("");
$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
</script>
<style>
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>