JavaScript ограничивает типы загрузки файлов (оценивается на основе информации заголовка файла)

Предисловие

В процессе фронтенд-разработки функция загрузки файлов практически незаменима.Во многих случаях, когда мы загружаем файлы, особенно при открытии функции загрузки файлов для обычных пользователей, нам обычно приходится накладывать некоторые ограничения на формат загружаемых файлов. чтобы предотвратить загрузку на сервер файлов вирусных сценариев злоумышленниками, хакерами и т. д. Общие ограничения на формат файлов следующие.

решение:

1. Ограничить с помощью атрибута принятия входного тега.

Мы можем использовать атрибут Accept тега входного файла в HTML5, чтобы ограничить видимый формат типа файла (по умолчанию — любой тип) при выборе загрузки файла в соответствии с нашими собственными потребностями.

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

2. Получите атрибут file.type или file.name загруженного файла через JS, чтобы ограничить его.

В JS вы можете получить соответствующие атрибуты загруженного файла через объект файла в событии загрузки.

Код:

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

Вышеупомянутые два метода являются нашими наиболее распространенными методами ограничения типов загрузки файлов. Однако, если ограничения основаны просто на расширениях (расширениях) и типах файлов, их очень легко взломать. Например, пользователи переименовывают суффикс файла (расширение) ) к указанному вами типу файла, который можно загрузить. Это позволит обойти ваши ограничения и загрузку можно будет завершить. На этом этапе: Мы определяем реальный формат файла на основе информации заголовка файла.

3. Получите информацию заголовка загруженного файла с помощью метода FileReader JS для ограничения.

В JS ограничения накладываются при чтении шестнадцатеричной информации заголовка файла, поскольку информация заголовка файла одного и того же типа одинакова, даже если пользователь изменяет суффикс имени (расширения) файла, но информация заголовка файла Это не изменится.

Код:

// 读取文件的二进制数据并将其转换为十六进制
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. Ограничение с помощью стороннего инструментария для типов файлов.

Инструментарий для работы с типами файлов также инкапсулирован в JS. Его принцип такой же, как и в третьем методе, описанном выше. Он поддерживает десятки типов файлов, которые практически удовлетворяют наши повседневные потребности в разработке.

npm i file-type

Адрес Npm: тип файла - npm

Добро пожаловать для общения в зоне комментариев.

Если статья оказалась для вас полезной, ❤️Подпишитесь + поставьте лайк❤️поддержите ее ! Блогер будет продолжать обновлять информацию. . . .

Исходный текст моего блога: JavaScript ограничивает типы загрузки файлов (оценивается на основе информации заголовка файла).