input type="file"美化
之所以会谈到input type="file"美化是因为默认的样式实在难以恭维,用过的人都知道,下面对其进行美化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.file {
position: relative;
display: inline-block;
background: #133d63;
border: 0.1rem solid #99d3f5;
border-radius: 0.2rem;
padding: 0.2rem 0.6rem;
overflow: hidden;
color: #f0faff;
text-decoration: none;
text-indent: 0;
line-height: 1.5rem;
font-size: 0.8rem;
margin-left: 7rem;
}
.file input {
position: absolute;
font-size: 0.8rem;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.file:hover {
background: #aadffd;
border-color: #78c3f3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<div class="file">
上传文件
<input type="file" name="image" accept="image/*" onchange="upload()">
</div>
<script type="text/javascript">
function upload(event) {
var e=window.event||event;
console.log(e)
// 获取当前选中的文件
var File = e.target.files[0];
console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
}
</script>
</body>
</html>
上传功能分析
//change是当你选中文件,然后点击打开后触发的,这个时候就会触发上传功能
<script type="text/javascript">
function upload(event) {
var e=window.event||event;
console.log(e)
// 获取当前选中的文件
var File = e.target.files[0];
console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
}
</script>
console.log(File)的打印结果:
accept=“image/*” 做类型限制,这样在选择文件的时候就只能选择文件类型的图片
还有以下的上传文件类型规定
<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />
但是上面的限制还是不能阻止一些恶意用户,就算选择类型是图片其实还是可以选择少部分的其他格式例如:.zip
在发送请求之前还需要进行文件类型验证,彻底堵住后台的嘴
//发送数据之前
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(File.type.split("/")[1]) < 0) {
//用你选择组件的报错弹窗就行,报出以下提醒
alert("上传的文件必须是图片格式");
return;
}
当我们要上传所有类型的的文件的时候通过File.type似乎是有点问题,那么这里提供一个稳妥的办法,通过File.name来进行判断
/ 限制文件类型 lastIndexOf倒着查找,substr截取(前闭后开)
var fileType = File.name.substr(File.name.lastIndexOf(".")+1);
if (['doc', 'docx', 'pdf', 'txt', 'htm', 'html'].indexOf(fileType) < 0) {
alert("只支持.doc .docx .pdf .txt .htm .html格式文件");
return;
}
上传大小限制
上传文件的大小也限制一下,前端做限制很简单,利用之前File打印结果中的size字段,这里API给我们返回的是所选文件的字节数,1KB=1024字节,1MB=1024KB。利用以上,我们加个判断。这里size的单位是字节
var imgMaxSize = 1024 * 1024 * 4; // 4MB图片的字节数
if(File.size>imgMaxSize){
alert("您可上传文件的最大限制为4MB");
return;
}
特殊情况(参考他人)
如果你用的是jquery.ajax,并且你上传的是文档文件,可能ajax会对你的文件进行预处理,然后你就可能遇到如下错误:
Illegal invocation这时候我们在ajax里面配置一下选项processData:false, 关掉jquery的预处理就行了,一般这种问题多发生在文档文件上
$.ajax({
type:'POST',
url:url,
data:formData,
contentType:undefined,
processData:false,
success:function(data){
}
});
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.file {
position: relative;
display: inline-block;
background: #133d63;
border: 0.1rem solid #99d3f5;
border-radius: 0.2rem;
padding: 0.2rem 0.6rem;
overflow: hidden;
color: #f0faff;
text-decoration: none;
text-indent: 0;
line-height: 1.5rem;
font-size: 0.8rem;
margin-left: 7rem;
}
.file input {
position: absolute;
font-size: 0.8rem;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.file:hover {
background: #aadffd;
border-color: #78c3f3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<div class="file">
上传文件
<input type="file" name="image" accept="image/*" onchange="upload()">
</div>
<script type="text/javascript">
function upload(event) {
var e=window.event||event;
console.log(e)
// 获取当前选中的文件
var File = e.target.files[0];
console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
var data=new FormData();
data.append("file",File)
let refreshToken = localStorage.getItem("token");
axios
.post(
"http://202.101.162.69:8089/proxy/top/api/upload/oss",
data,
{
headers: {
Authorization: refreshToken,
},
}
)
.then((res) => {
if (res.data.code == 200) {
this.$message({
message: "上传文件成功",
type: "success",
center: "true",
duration: 500,
customClass: "press",
});
} else {
this.$message({
message: "上传文件失败",
type: "warning",
center: "true",
duration: 500,
customClass: "press",
});
}
}
</script>
</body>
</html>