版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
1.首先,在html页面编写
<input type="text" style="line-height: 36px;" class="pc_jzxx_left_input" id="showFileName1"/>
<a href="javascript:;" class="file">选择文件
<input type="file" >
</a>
2.在css文件里边编写
.file {
width: 64px;
height: 22px;
position: relative;
vertical-align: middle;
display: inline-block;
border: 1px solid #333;
padding: 4px 10px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
border-radius: 5px;
color: #000;
background:#ccc; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #fff, #ccc);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));
background:-o-linear-gradient(top, #fff, #ccc);
}
.file input {
width: 120px !important;
position: absolute;
font-size: 16px;
right: 0;
top: 0;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
3.在java script编写
//上传文件
$(".file").on("change","input[type='file']",function(){
var filePath=$(this).val();
//判断文件类型
if(filePath.indexOf("docx")!=-1 || filePath.indexOf("txt")!=-1|| filePath.indexOf("jpg")!=-1|| filePath.indexOf("png")!=-1){
$(".fileerrorTip1").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
console.log("成功"+fileName);
$("#showFileName1").val(fileName);
}else{
// $("#showFileName1").val("");
$("#showFileName1").val("您未上传文件,或上传文件类型有误!").show();
return false
}
})
写完之后的样子