Определить тип файла html

Определить тип файла html

Добро пожаловать, этот инструмент может определить расширение файла, тип файла без расширения, тип файла mime

• jpg — Joint Photographic Experts Group image
• png — Portable Network Graphics
• apng — Animated Portable Network Graphics
• gif — Graphics Interchange Format
• webp — Web Picture format
• flif — Free Lossless Image Format
• xcf — eXperimental Computing Facility
• cr2 — Canon Raw image file (v2)
• cr3 — Canon Raw image file (v3)
• orf — Olympus Raw image file
• arw — Sony Alpha Raw image file
• dng — Adobe Digital Negative image file
• nef — Nikon Electronic Format image file
• rw2 — Panasonic RAW image file
• raf — Fujifilm RAW image file
• tif — Tagged Image file
• bmp — Bitmap image file
• icns — Apple Icon image
• jxr — Joint Photographic Experts Group extended range
• psd — Adobe Photoshop document
• indd — Adobe InDesign document
• zip — Archive file
• tar — Tarball archive file
• rar — Archive file
• gz — Archive file
• bz2 — Archive file
• zst — Archive file
• 7z — 7-Zip archive
• dmg — Apple Disk Image
• mp4 — MPEG-4 Part 14 video file
• mid — Musical Instrument Digital Interface file
• mkv — Matroska video file
• webm — Web video file
• mov — QuickTime video file
• avi — Audio Video Interleave file
• mpg — MPEG-1 file
• mp1 — MPEG-1 Audio Layer I
• mp2 — MPEG-1 Audio Layer II
• mp3 — Audio file
• ogg — Audio file
• ogv — Audio file
• ogm — Audio file
• oga — Audio file
• spx — Audio file
• ogx — Audio file
• opus — Audio file
• flac — Free Lossless Audio Codec
• wav — Waveform Audio file
• qcp — Tagged and chunked data
• amr — Adaptive Multi-Rate audio codec
• pdf — Portable Document Format
• epub — E-book file
• mobi — Mobipocket
• exe — Executable file
• swf — Adobe Flash Player file
• rtf — Rich Text Format
• woff — Web Open Font Format
• woff2 — Web Open Font Format
• eot — Embedded OpenType font
• ttf — TrueType font
• otf — OpenType font
• ico — Windows icon file
• flv — Flash video
• ps — Postscript
• xz — Compressed file
• sqlite — SQLite file
• nes — Nintendo NES ROM
• crx — Google Chrome extension
• xpi — XPInstall file
• cab — Cabinet file
• deb — Debian package
• ar — Archive file
• rpm — Red Hat Package Manager file
• Z — Unix Compressed File
• lz — Arhive file
• cfb — Compount File Binary Format
• mxf — Material Exchange Format
• mts — Blu-ray Disc Audio-Video MPEG-2 Transport Stream
• wasm — WebAssembly intermediate compiled format
• blend — Blender project
• bpg — Better Portable Graphics file
• docx — Microsoft Word
• pptx — Microsoft Powerpoint
• xlsx — Microsoft Excel
• jp2 — JPEG 2000
• jpm — JPEG 2000
• jpx — JPEG 2000
• mj2 — Motion JPEG 2000
• aif — Audio Interchange file
• odt — OpenDocument for word processing
• ods — OpenDocument for spreadsheets
• odp — OpenDocument for presentations
• xml — eXtensible Markup Language
• heic — High Efficiency Image File Format
• cur — Icon file
• ktx — OpenGL and OpenGL ES textures
• ape — Monkey’s Audio
• wv — WavPack
• asf — Advanced Systems Format
• dcm — DICOM Image File
• mpc — Musepack (SV7 & SV8)
• ics — iCalendar
• vcf — vCard
• glb — GL Transmission Format
• pcap — Libpcap File Format
• dsf — Sony DSD Stream File (DSF)
• lnk — Microsoft Windows file shortcut
• alias — macOS Alias file
• voc — Creative Voice File
• ac3 — ATSC A/52 Audio File
• 3gp — Multimedia container format defined by the Third Generation Partnership Project (3GPP) for 3G UMTS multimedia services
• 3g2 — Multimedia container format defined by the 3GPP2 for 3G CDMA2000 multimedia services
• m4v — MPEG-4 Visual bitstreams
• m4p — MPEG-4 files with audio streams encrypted by FairPlay Digital Rights Management as were sold through the iTunes Store
• m4a — Audio-only MPEG-4 files
• m4b — Audiobook and podcast MPEG-4 files, which also contain metadata including chapter markers, images, and hyperlinks
• f4v — ISO base media file format used by Adobe Flash Player
• f4p — ISO base media file format protected by Adobe Access DRM used by Adobe Flash Player
• f4a — Audio-only ISO base media file format used by Adobe Flash Player
• f4b — Audiobook and podcast ISO base media file format used by Adobe Flash Player
• mie — Dedicated meta information format which supports storage of binary as well as textual meta information
• shp — Geospatial vector data format
• arrow — Columnar format for tables of data
• aac — Advanced Audio Coding
• it — Audio module format: Impulse Tracker
• s3m — Audio module format: ScreamTracker 3
• xm — Audio module format: FastTracker 2
• ai — Adobe Illustrator Artwork
• skp — SketchUp
• avif — AV1 Image File Format
• eps — Encapsulated PostScript
• lzh — LZH archive
• pgp — Pretty Good Privacy
• asar — Archive format primarily used to enclose Electron applications
• stl — Standard Tesselated Geometry File Format (ASCII only)
• chm — Microsoft Compiled HTML Help
• 3mf — 3D Manufacturing Format
• jxl — JPEG XL image format

Источник

Как проверить тип файла MIME с помощью JavaScript перед загрузкой?

Я прочитал этот и этот вопрос, который, кажется, предполагает, что файл MIME-типа можно проверить используя javascript на стороне клиента. Теперь я понимаю, что реальная проверка еще должна выполняться на стороне сервера. Я хочу выполнить проверку на стороне клиента, чтобы избежать ненужной потери ресурсов сервера. Чтобы проверить, можно ли это сделать на стороне клиента, я изменил расширение тестового файла JPEG на .png и выберет файл для загрузки. Перед отправкой файла я запрашиваю объект файла с помощью консоли javascript:

document.getElementsByTagName('input')[0].files[0]; 

Показывает тип image/png , который указывает, что проверка выполняется на основе расширения файла вместо типа MIME. Я пробовал Firefox 22.0, и это дает мне тот же результат. Но согласно спецификация W3C, MIME Sniffing должно быть реализовано. Можно ли сказать, что нет способа проверить тип MIME с javascript на данный момент? Или я что-то упускаю?

I want to perform a client side checking to avoid unnecessary wastage of server resource. Я не понимаю, почему вы говорите, что проверка должна выполняться на стороне сервера, но потом говорите, что хотите уменьшить ресурсы сервера. Золотое правило: никогда не доверяйте пользовательскому вводу . Какой смысл проверять тип MIME на стороне клиента, если вы просто делаете это на стороне сервера. Конечно, это «ненужная трата клиентского ресурса»?

Хорошая идея — обеспечить лучшую проверку типов файлов и обратную связь для пользователей на стороне клиента. Однако, как вы указали, браузеры просто полагаются на расширения файлов при определении значения свойства type для объектов File . Например, исходный код webkit раскрывает эту истину. Можно точно идентифицировать файлы на стороне клиента, среди прочего, просматривая «волшебные байты» в файлах. В настоящее время я работаю над библиотекой MIT (в то время, когда у меня мало свободного времени), которая будет заниматься именно этим. Если вы заинтересованы в моем прогрессе, загляните на github.com/rnicholus/determinater .

@IanClark, дело в том, что если файл имеет недопустимый тип, я могу отклонить его на стороне клиента, а не тратить пропускную способность загрузки только для того, чтобы отклонить его на стороне сервера.

Вы уверены, что в вашем тестовом файле все еще есть mimetype image/jpeg , и вы на самом деле не изменили его, изменив расширение?

Тип MIME — не волшебная пуля, это просто предположение. Сами бинарные файлы не обладают таким свойством, поэтому нет способа беспрепятственно «получить его» на стороне клиента. Он устанавливается BY SERVERS при отправке данных КЛИЕНТАМ, но даже тогда он часто определяется по расширению файла или .. явно устанавливается бэкэнд-разработчиками, которые знают, какой тип контента они отправляют. en.wikipedia.org/wiki/Mime_type

@QuestionOverflow Немного поздно, но я добавил полное решение и живую, работающую демонстрацию в своем ответе. Наслаждаться.

7 ответов

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

Убедитесь, что ваш браузер поддерживает как File и Blob . Все основные должны.

if (window.FileReader && window.Blob) < // All the File APIs are supported. >else < // File and Blob are not supported >

Шаг 1:

Вы можете получить информацию о File из элемента как это (ref):

Ниже приведена версия перетаскивания (ref):

Шаг 2:

Теперь мы можем проверять файлы и дразнить заголовки и типы MIME.

✘ Быстрый метод

Вы можете наивно спросить Blob для типа MIME любого файла, который он представляет, используя этот шаблон:

var blob = files[i]; // See step 1 above console.log(blob.type); 

Для изображений типы MIME возвращаются следующим образом:

Предостережение: тип MIME определяется из расширения файла и может быть обманут или подделан. Можно переименовать .jpg в .png и тип MIME будет отображаться как image/png .

✓ Правильный метод проверки заголовка

Чтобы получить Bonafide MIME-тип клиентского файла, мы можем пойти дальше и проверить первые несколько байтов данного файла для сравнения с так называемыми магическими числами. Будьте предупреждены, что это не совсем просто, потому что, например, JPEG имеет несколько «волшебных чисел». Это связано с тем, что формат развивается с 1991 года. Вы можете уйти с проверкой только первых двух байтов, но я предпочитаю проверять не менее 4 байтов для уменьшения ложных срабатываний.

Примеры файлов подписи JPEG (первые 4 байта):

FF D8 FF E0 (SOI + ADD0)
FF D8 FF E1 (SOI + ADD1)
FF D8 FF E2 (SOI + ADD2)

Вот необходимый код для извлечения заголовка файла:

var blob = files[i]; // See step 1 above var fileReader = new FileReader(); fileReader.onloadend = function(e) < var arr = (new Uint8Array(e.target.result)).subarray(0, 4); var header = ""; for(var i = 0; i < arr.length; i++) < header += arr[i].toString(16); >console.log(header); // Check the file signature against known types >; fileReader.readAsArrayBuffer(blob); 

Затем вы можете определить настоящий MIME-тип (более подписи файлов здесь и здесь):

Принять или отклонить загрузку файлов, как вам нравится, на основе ожидаемых типов MIME.

демонстрация

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

Обратите внимание, что даже если изображение будет переименовано, можно определить его истинный тип MIME. Увидеть ниже.

// Return the first few bytes of the file as a hex string function getBLOBFileHeader(url, blob, callback) < var fileReader = new FileReader(); fileReader.onloadend = function(e) < var arr = (new Uint8Array(e.target.result)).subarray(0, 4); var header = ""; for (var i = 0; i < arr.length; i++) < header += arr[i].toString(16); >callback(url, header); >; fileReader.readAsArrayBuffer(blob); > function getRemoteFileHeader(url, callback) < var xhr = new XMLHttpRequest(); // Bypass CORS for this demo - naughty, Drakes xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url); xhr.responseType = "blob"; xhr.onload = function() < callback(url, xhr.response); >; xhr.onerror = function() < alert('A network error occurred!'); >; xhr.send(); > function headerCallback(url, headerString) < printHeaderInfo(url, headerString); >function remoteCallback(url, blob) < printImage(blob); getBLOBFileHeader(url, blob, headerCallback); >function printImage(blob) < // Add this image to the document body for proof of GET success var fr = new FileReader(); fr.onloadend = function() < $("hr").after($("").attr("src", fr.result)) .after($("").text("Blob MIME type: " + blob.type)); >; fr.readAsDataURL(blob); > // Add more from http://en.wikipedia.org/wiki/List_of_file_signatures function mimeType(headerString) < switch (headerString) < case "89504e47": type = "image/png"; break; case "47494638": type = "image/gif"; break; case "ffd8ffe0": case "ffd8ffe1": case "ffd8ffe2": type = "image/jpeg"; break; default: type = "unknown"; break; >return type; > function printHeaderInfo(url, headerString) < $("hr").after($("").text("Real MIME type: " + mimeType(headerString))) .after($("").text("File header: 0x" + headerString)) .after($("").text(url)); > /* Demo driver code */ var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"]; // Check for FileReader support if (window.FileReader && window.Blob) < // Load all the remote images from the urls array for (var i = 0; i < imageURLsArray.length; i++) < getRemoteFileHeader(imageURLsArray[i], remoteCallback); >/* Handle local files */ $("input").on('change', function(event) < var file = event.target.files[0]; if (file.size >= 2 * 1024 * 1024) < alert("File size must be at most 2MB"); return; >remoteCallback(escape(file.name), file); >); > else < // File and Blob are not supported $("hr").after( $("").text("It seems your browser doesn't support FileReader") ); > /* Drakes, 2015 */

 
 
Choose an image to see its file signature.
 
 

Источник