1.背景
- 我们经常会用到文件上传功能,例如,百度网盘、QQ邮箱等,在HTML5中,我们可以通过文件框来选择上传文件
2.文件选择框
- 两个重要的属性
- accept(过滤MIME类型文件,例如:image/png、image/jpeg、image/gif、text/plain等)
- 用于设置文件的过滤类型,也就是说设置只能选取哪种类型的文件进行上传,多个过滤类型用逗号隔开
- accept(过滤MIME类型文件,例如:image/png、image/jpeg、image/gif、text/plain等)
<input type="file" accept="过滤文件类型1,过滤文件2...">
-
- muiltiple
- 表示是否选择多个文件,也就是说任意类型文件,可以选择多个进行上传
- 通常和accept搭配使用,提高严谨性
- muiltiple
<input type="file" accept="过滤文件类型1,过滤文件2..." multiple> // 因为multiple的属性值就是本身,所以直接写 multiple
- 技巧(蛮实用的技巧)
- 因为文件选择框样式很丑,所以我们可以用到opacity属性,将其边透明,之后利用label来做一个好看的样式,之后利用定位来解决点击问题
<style>
#content{
width: 160px;
margin: 30px auto;
}
#filePicker{
position: relative;
width: 160px;
height: 50px;
border-radius: 10px;
background-color: gray;
line-height: 50px;
text-align: center;
color: white;
cursor: pointer;
}
#filePicker:active{
background-color: blue;
}
#fileInput{
position: absolute;
top: 0px;
left: 0px;
width: 160px;
height: 50px;
opacity: 0;
}
</style>
</head>
<body>
<div id="content">
<form id="filePicker">
<label>点击选择文件</label>
<input type="file" id="fi