Input type="file" beautification The
reason why I talk about input type="file" beautification is because the default style is really hard to compliment. Anyone who has used it knows that, let's beautify it.
<!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>
Upload function analysis
//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>
The print result of console.log(File):
accept=“image/*”Make type restrictions, so that when selecting files, you can only choose pictures of file types.
There are also the following upload file type regulations
<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />
However, the above restrictions still cannot stop some malicious users. Even if the selected type is picture, you can still choose a small number of other formats. For example: .zip
requires file type verification before sending the request, completely blocking the background of the mouth.
//发送数据之前
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(File.type.split("/")[1]) < 0) {
//用你选择组件的报错弹窗就行，报出以下提醒
alert("上传的文件必须是图片格式");
return;
}
When we want to upload all types of files, it seems a bit of a problem to pass File.type, so here is a safe way to judge by 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;
}
Upload size limit
The size of the uploaded file is also limited. The front-end limit is very simple. Use the size field in the previous File print result. Here, the API returns us the number of bytes of the selected file, 1KB=1024 bytes, 1MB=1024KB. Using the above, we add a judgment. The unit of size here is bytes
var imgMaxSize = 1024 * 1024 * 4; // 4MB图片的字节数
if(File.size>imgMaxSize){
alert("您可上传文件的最大限制为4MB");
return;
}
Special circumstances (refer to others)
If you are using jquery.ajax and you are uploading a document file, ajax may preprocess your file, and then you may encounter the following error:
Illegal invocation At this time, we configure the option processData in ajax: false, just turn off the preprocessing of jquery, generally this kind of problem occurs in the document file
$.ajax({
type:'POST',
url:url,
data:formData,
contentType:undefined,
processData:false,
success:function(data){
}
});
Complete code:
<!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>