Tipo de entrada = embellecimiento de "archivo" La
razón por la que hablé del embellecimiento de tipo de entrada = "archivo" es porque el estilo predeterminado es muy difícil de complementar. Cualquiera que lo haya usado lo sabe, embellezcamos a continuación.
<!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>
Subir análisis de funciones
//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>
El resultado de impresión de console.log (Archivo):
aceptar = "imagen / *"Establezca restricciones de tipo, de modo que al seleccionar archivos, solo pueda elegir imágenes de tipos de archivo.
También existen las siguientes regulaciones de tipo de archivo de carga
<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />
Sin embargo, las restricciones anteriores aún no pueden detener a algunos usuarios malintencionados. Incluso si el tipo seleccionado es una imagen, aún puede elegir una pequeña cantidad de otros formatos. Por ejemplo: .zip
requiere la verificación del tipo de archivo antes de enviar la solicitud, bloqueando completamente el fondo de la boca.
//发送数据之前
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(File.type.split("/")[1]) < 0) {
//用你选择组件的报错弹窗就行，报出以下提醒
alert("上传的文件必须是图片格式");
return;
}
Cuando queremos cargar todo tipo de archivos, parece ser un problema pasar File.type, así que aquí hay una forma segura de juzgar por 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;
}
Límite de tamaño de carga
El tamaño del archivo subido también es limitado. El límite de front-end es muy simple. Utilice el campo de tamaño en el resultado de impresión del archivo anterior. Aquí, la API nos devuelve el número de bytes del archivo seleccionado, 1KB = 1024 bytes, 1 MB = 1024 KB. Usando lo anterior, agregamos un juicio. La unidad de tamaño aquí es bytes
var imgMaxSize = 1024 * 1024 * 4; // 4MB图片的字节数
if(File.size>imgMaxSize){
alert("您可上传文件的最大限制为4MB");
return;
}
Circunstancias especiales (referirse a otros)
Si está usando jquery.ajax y está cargando un archivo de documento, ajax puede preprocesar su archivo, y luego puede encontrar el siguiente error:
Invocación ilegal En este momento, configuramos la opción processData en ajax: false, simplemente apague el preprocesamiento de jquery, generalmente este tipo de problema ocurre en el archivo del documento
$.ajax({
type:'POST',
url:url,
data:formData,
contentType:undefined,
processData:false,
success:function(data){
}
});
Código completo:
<!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>