JavaScript limita los tipos de carga de archivos (juzgados según la información del encabezado del archivo)

Prefacio

En el proceso de desarrollo front-end, la función de carga de archivos es casi indispensable. Muchas veces, cuando cargamos archivos, especialmente cuando abrimos la función de carga de archivos a usuarios comunes, generalmente necesitamos imponer algunas restricciones al formato de los archivos cargados. Para evitar que usuarios malos, piratas informáticos, etc. carguen archivos de secuencias de comandos de virus en el servidor. Las restricciones de formato de archivos comunes son las siguientes.

solución:

1. Restringir mediante el atributo de aceptación de la etiqueta de entrada

Podemos usar el atributo de aceptación de la etiqueta del archivo de entrada en HTML5 para limitar el formato de tipo de archivo visible (el valor predeterminado es cualquier tipo) al elegir cargar un archivo de acuerdo con nuestras propias necesidades.

<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="upFile(event)" />

2. Obtenga el atributo file.type o file.name del archivo cargado a través de JS para limitarlo.

En JS, puede obtener los atributos relevantes del archivo cargado a través del objeto de archivo en el evento de carga.

Código:

function upFile(event) {
	const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;
	console.dir(file); // 文件对象
	console.log(file.name); // 文件名称  
	console.log(file.type); // 文件类型
        console.log(file.size); // 文件大小
	// 对文件类型做简单限制：如：只允许上传 jpg  png gif 这3种格式
	if(!file.type && /\.(?:jpg|png|gif)$/.test(file.name)) ){ 
	  alert('对不起：上传的图片格式只能是：jpg, png, gif 格式！'); 
    	  return false; 
    } 
}

Los dos métodos anteriores son nuestros métodos más comunes para restringir los tipos de carga de archivos. Sin embargo, si las restricciones se basan simplemente en las extensiones y tipos de archivos, es muy fácil descifrar. Por ejemplo, los usuarios cambian el nombre del sufijo del archivo (extensión ) al tipo de archivo que especifiques y que se puede cargar. Esto evitará tus restricciones y la carga se podrá completar. En este punto: determinamos el formato real del archivo en función de la información del encabezado del archivo.

3. Obtenga la información del encabezado del archivo cargado a través del método FileReader de JS para restringirlo.

En JS, las restricciones se imponen al leer la información del encabezado hexadecimal del archivo, porque la información del encabezado del mismo tipo de archivo es la misma, incluso si el usuario modifica el nombre del sufijo (extensión) del archivo, pero la información del encabezado del archivo No cambiará.

Código:

// 读取文件的二进制数据并将其转换为十六进制
function fileReader (blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsBinaryString(blob);
    reader.onload = (ret) => {
      const res = reader.result.split('').map((o) => o.charCodeAt().toString(16).padStart(2, '0'));
      resolve(res.join(' ').toUpperCase());
    },
    reader.onerror = (err) => {
      reject(err);
    };
  });
};

// png格式
async function isPng(file) {
  return (await fileReader(file.slice(0, 8))) == "89 50 4E 47 0D 0A 1A 0A";
};

// jpg格式
async function isJpg(file) {
  const start = await fileReader(file.slice(0, 2));
  const end = await fileReader(file.slice(-2, file.size));
  return "FF D8" == start && "FF D9" == end;
};

// gif格式
async function isGif(file) {
  const ret = await fileReader(file.slice(0, 6));
  return "47 49 46 38 39 61" == ret || "47 49 46 38 37 61" == ret;
};

async function upFile(event) {
	const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;
	console.dir(file); // 文件对象
	console.log(file.name); // 文件名称  
	console.log(file.type); // 文件类型
        console.log(file.size); // 文件大小
	// 根据文件头信息进行判断限制：如：只允许上传 png 这种格式
	if(!await isPng(file)){ 
	    alert('对不起：上传的图片格式只能是：png格式！'); 
    	return false; 
    }
}

4. Restricción a través de un kit de herramientas de tipo de archivo de terceros

El kit de herramientas de tipo de archivo también está encapsulado en JS y su principio es el mismo que el del tercer método anterior: admite docenas de tipos de archivos, lo que casi puede satisfacer nuestras necesidades de desarrollo diarias.

npm i file-type

Dirección npm: tipo de archivo - npm

Bienvenido a comunicarse en el área de comentarios.

Si el artículo te resulta útil, ❤️Sigue + Me gusta❤️¡Anímalo ! El blogger seguirá actualizándose. . . .

Texto original de mi blog: JavaScript limita los tipos de carga de archivos (juzgados según la información del encabezado del archivo)