JavaScript limite les types de téléchargement de fichiers (jugés en fonction des informations d'en-tête du fichier)

Préface

Dans le processus de développement front-end, la fonction de téléchargement de fichiers est presque indispensable. Souvent, lorsque nous téléchargeons des fichiers, en particulier lorsque nous ouvrons la fonction de téléchargement de fichiers aux utilisateurs ordinaires, nous devons généralement imposer certaines restrictions sur le format des fichiers téléchargés. pour empêcher les mauvais utilisateurs, les pirates, etc. de télécharger des fichiers de script de virus sur le serveur. Les restrictions courantes en matière de format de fichier sont les suivantes.

solution:

1. Restreindre via l'attribut accept de la balise d'entrée

Nous pouvons utiliser l'attribut accept de la balise du fichier d'entrée en HTML5 pour limiter le format de type de fichier visible (la valeur par défaut est n'importe quel type) lorsque nous choisissons de télécharger un fichier en fonction de nos propres besoins.

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

2. Obtenez l'attribut file.type ou file.name du fichier téléchargé via JS pour le limiter.

Dans JS, vous pouvez obtenir les attributs pertinents du fichier téléchargé via l'objet fichier dans l'événement de téléchargement.

Code:

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; 
    } 
}

Les deux méthodes ci-dessus sont nos méthodes les plus courantes pour restreindre les types de téléchargement de fichiers. Cependant, si les restrictions sont simplement basées sur les extensions de fichiers (extensions) et les types de fichiers, il est très facile de les pirater. Par exemple, les utilisateurs renomment le suffixe du fichier (extension ) au type de fichier que vous spécifiez et qui peut être téléchargé. Cela contournera vos restrictions et le téléchargement pourra être terminé. À ce stade : Nous déterminons le format réel du fichier en fonction des informations d'en-tête du fichier.

3. Obtenez les informations d'en-tête du fichier téléchargé via la méthode FileReader de JS pour la restriction.

Dans JS, des restrictions sont imposées en lisant les informations d'en-tête hexadécimales du fichier, car les informations d'en-tête de fichier du même type de fichier sont les mêmes, même si l'utilisateur modifie le nom de suffixe (extension) du fichier, mais les informations d'en-tête du fichier Cela ne changera pas.

Code:

// 读取文件的二进制数据并将其转换为十六进制
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. Restriction via une boîte à outils de type de fichier tierce

La boîte à outils de type de fichier est également encapsulée dans JS. Son principe est le même que la troisième méthode ci-dessus. Elle prend en charge des dizaines de types de fichiers, qui peuvent presque répondre à nos besoins quotidiens de développement.

npm i file-type

Adresse Npm : type de fichier - npm

Bienvenue à communiquer dans la zone de commentaires.

Si l'article vous est utile, ❤️Suivez + Aimez❤️encouragez-le ! Le blogueur continuera à mettre à jour. . . .

Texte original de mon blog : JavaScript limite les types de téléchargement de fichiers (jugés en fonction des informations d'en-tête du fichier)