내가 읽은 이 와 이 파일의 MIME 유형이 클라이언트 측에서 자바 스크립트를 사용하여 검사 할 수 있음을 시사하는 것 같다 질문입니다. 이제 실제 검증은 여전히 서버 측에서 수행되어야한다는 것을 알고 있습니다. 불필요한 서버 리소스 낭비를 피하기 위해 클라이언트 측 검사를 수행하고 싶습니다.
클라이언트 측 에서이 작업을 수행 할 수 있는지 테스트하기 위해 JPEG테스트 파일 의 확장자를로 변경하고 .png업로드 할 파일을 선택했습니다. 파일을 보내기 전에 자바 스크립트 콘솔을 사용하여 파일 객체를 쿼리합니다.
document.getElementsByTagName('input')[0].files[0];이것이 Chrome 28.0에서 얻는 것입니다.
{webkitRelativePath : “”, lastModifiedDate : 2012 년 10 월 16 일 화요일 10:00:00 GMT + 0000 (UTC), 이름 : “test.png”, 유형 : “image / png”, 크기 : 500055…}
image/png검사가 MIME 유형 대신 파일 확장자를 기반으로 수행되었음을 나타내는 것으로 보이는 유형을 보여줍니다 . Firefox 22.0을 사용해 보니 같은 결과를 얻습니다. 그러나 W3C 사양에 따르면 MIME 스니핑 을 구현해야합니다.
현재 자바 스크립트로 MIME 유형을 확인할 수있는 방법이 없다고 말할 수 있습니까? 아니면 뭔가 빠졌습니까?
답변
FileReader서버에 업로드하기 전에 JavaScript를 사용하여 파일 MIME 유형을 쉽게 확인할 수 있습니다 . 클라이언트 쪽보다 서버 쪽 확인을 선호하지만 클라이언트 쪽 확인은 여전히 가능하다는 데 동의합니다. 하단에 실습 데모를 제공하는 방법을 보여 드리겠습니다.
브라우저를 모두 지원하는지 확인 File하고 Blob. 모든 주요한 것.
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}1 단계:
다음 과 같은 요소 에서 File정보를 검색 할 수 있습니다 <input>( ref ).
<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
// When the control has changed, there are new files
var files = control.files,
for (var i = 0; i < files.length; i++) {
console.log("Filename: " + files[i].name);
console.log("Type: " + files[i].type);
console.log("Size: " + files[i].size + " bytes");
}
}, false);
</script>위의 드래그 앤 드롭 버전 ( ref )은 다음과 같습니다.
<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
target.addEventListener("drop", function(event) {
// Cancel default actions
event.preventDefault();
var files = event.dataTransfer.files,
for (var i = 0; i < files.length; i++) {
console.log("Filename: " + files[i].name);
console.log("Type: " + files[i].type);
console.log("Size: " + files[i].size + " bytes");
}
}, false);
</script>2 단계:
이제 파일을 검사하고 헤더 및 MIME 유형을 정리할 수 있습니다.
✘ 빠른 방법
이 패턴을 사용하여 Blob 에게 표시하는 파일의 MIME 유형을 순진하게 요청할 수 있습니다 .
var blob = files[i]; // See step 1 above
console.log(blob.type);이미지의 경우 MIME 유형은 다음과 같이 돌아옵니다.
이미지 / jpeg
이미지 / png
…
주의 사항 : MIME 형식은 파일 확장명에서 감지되며 속이거나 스푸핑 될 수 있습니다. a의 이름을 a .jpg로 바꾸면 .pngMIME 유형이로보고됩니다 image/png.
✓ 적절한 헤더 검사 방법
클라이언트 측 파일의 bonafide MIME 유형을 얻으려면 한 단계 더 나아가 주어진 파일의 처음 몇 바이트를 검사하여 소위 magic numbers 와 비교할 수 있습니다. 예를 들어 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 유형을 결정할 수 있습니다 ( 여기 및 여기 에서 더 많은 파일 서명 ).
switch (header) {
case "89504e47":
type = "image/png";
break;
case "47494638":
type = "image/gif";
break;
case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
case "ffd8ffe3":
case "ffd8ffe8":
type = "image/jpeg";
break;
default:
type = "unknown"; // Or you can use the blob.type as fallback
break;
}예상되는 MIME 유형에 따라 파일 업로드를 승인하거나 거부합니다.
데모
다음은 로컬 파일 및 원격 파일에 대한 실제 데모입니다 (이 데모에서는 CORS를 무시해야했습니다). 스 니펫을 열고 실행하면 다른 유형의 원격 이미지 3 개가 표시됩니다. 상단에서 로컬 이미지 또는 데이터 파일을 선택할 수 있으며 파일 서명 및 / 또는 MIME 유형이 표시됩니다.
이미지 이름이 바뀌어도 실제 MIME 유형을 확인할 수 있습니다. 아래를 참조하십시오.
스크린 샷
답변
다른 답변에서 언급했듯이 파일의 첫 바이트에서 파일 의 서명 을 확인하여 MIME 유형을 확인할 수 있습니다 .
그러나 다른 답변은 서명을 확인하기 위해 전체 파일을 메모리 에 로드하는 것입니다 .이 방법은 매우 낭비이며 큰 파일을 실수로 선택하면 브라우저를 쉽게 정지시킬 수 있습니다.
/**
* Load the mime type based on the signature of the first bytes of the file
* @param {File} file A instance of File
* @param {Function} callback Callback with the result
* @author Victor www.vitim.us
* @date 2017-03-23
*/
function loadMime(file, callback) {
//List of known mimes
var mimes = [
{
mime: 'image/jpeg',
pattern: [0xFF, 0xD8, 0xFF],
mask: [0xFF, 0xFF, 0xFF],
},
{
mime: 'image/png',
pattern: [0x89, 0x50, 0x4E, 0x47],
mask: [0xFF, 0xFF, 0xFF, 0xFF],
}
// you can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
function check(bytes, mime) {
for (var i = 0, l = mime.mask.length; i < l; ++i) {
if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) {
return false;
}
}
return true;
}
var blob = file.slice(0, 4); //read the first 4 bytes of the file
var reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState === FileReader.DONE) {
var bytes = new Uint8Array(e.target.result);
for (var i=0, l = mimes.length; i<l; ++i) {
if (check(bytes, mimes[i])) return callback("Mime: " + mimes[i].mime + " <br> Browser:" + file.type);
}
return callback("Mime: unknown <br> Browser:" + file.type);
}
};
reader.readAsArrayBuffer(blob);
}
//when selecting a file on the input
fileInput.onchange = function() {
loadMime(fileInput.files[0], function(mime) {
//print the output to the screen
output.innerHTML = mime;
});
};<input type="file" id="fileInput">
<div id="output"></div>답변
Sindresorhus는이를 직접 구현하지 않으려는 사용자를 위해 브라우저에서 작동하는 유틸리티를 만들었으며 원하는 대부분의 문서에 대한 헤더-마임 매핑이 있습니다.
https://github.com/sindresorhus/file-type
이 유틸리티를 사용하여 모든 것을 메모리에로드하는 것을 피하기 위해 Vitim.us의 첫 번째 X 바이트에서만 읽도록 제안 할 수 있습니다 (예 : es6)
import fileType from 'file-type'; // or wherever you load the dependency
const blob = file.slice(0, fileType.minimumBytes);
const reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState !== FileReader.DONE) {
return;
}
const bytes = new Uint8Array(e.target.result);
const { ext, mime } = fileType.fromBuffer(bytes);
// ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);답변
업로드 된 파일이 이미지인지 확인하려는 경우 <img>오류 콜백 확인을 위해 태그에 파일을로드 할 수 있습니다 .
예:
var input = document.getElementsByTagName('input')[0];
var reader = new FileReader();
reader.onload = function (e) {
imageExists(e.target.result, function(exists){
if (exists) {
// Do something with the image file..
} else {
// different file format
}
});
};
reader.readAsDataURL(input.files[0]);
function imageExists(url, callback) {
var img = new Image();
img.onload = function() { callback(true); };
img.onerror = function() { callback(false); };
img.src = url;
}답변
이것은 당신이해야 할 일입니다
var fileVariable =document.getElementsById('fileId').files[0];이미지 파일 형식을 확인하려면
if(fileVariable.type.match('image.*'))
{
alert('its an image');
}답변
다음은 webp를 지원하는 Typescript 구현입니다. 이것은 Vitim.us의 JavaScript 답변을 기반으로합니다.
interface Mime {
mime: string;
pattern: (number | undefined)[];
}
// tslint:disable number-literal-format
// tslint:disable no-magic-numbers
const imageMimes: Mime[] = [
{
mime: 'image/png',
pattern: [0x89, 0x50, 0x4e, 0x47]
},
{
mime: 'image/jpeg',
pattern: [0xff, 0xd8, 0xff]
},
{
mime: 'image/gif',
pattern: [0x47, 0x49, 0x46, 0x38]
},
{
mime: 'image/webp',
pattern: [0x52, 0x49, 0x46, 0x46, undefined, undefined, undefined, undefined, 0x57, 0x45, 0x42, 0x50, 0x56, 0x50],
}
// You can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
// tslint:enable no-magic-numbers
// tslint:enable number-literal-format
function isMime(bytes: Uint8Array, mime: Mime): boolean {
return mime.pattern.every((p, i) => !p || bytes[i] === p);
}
function validateImageMimeType(file: File, callback: (b: boolean) => void) {
const numBytesNeeded = Math.max(...imageMimes.map(m => m.pattern.length));
const blob = file.slice(0, numBytesNeeded); // Read the needed bytes of the file
const fileReader = new FileReader();
fileReader.onloadend = e => {
if (!e || !fileReader.result) return;
const bytes = new Uint8Array(fileReader.result as ArrayBuffer);
const valid = imageMimes.some(mime => isMime(bytes, mime));
callback(valid);
};
fileReader.readAsArrayBuffer(blob);
}
// When selecting a file on the input
fileInput.onchange = () => {
const file = fileInput.files && fileInput.files[0];
if (!file) return;
validateImageMimeType(file, valid => {
if (!valid) {
alert('Not a valid image file.');
}
});
};<input type="file" id="fileInput">답변
Drake가 말했듯이 FileReader 로이 작업을 수행 할 수 있습니다. 그러나 내가 여기서 제시하는 것은 기능적인 버전입니다. JavaScript로이 작업을 수행 할 때 큰 문제는 입력 파일을 재설정하는 것입니다. 글쎄, 이것은 JPG로만 제한됩니다 (다른 형식의 경우 MIME 유형 과 마법 번호 를 변경해야합니다 ).
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>이는 최신 버전의 Firefox 및 Chrome 및 IExplore 10에서 테스트되었음을 고려하십시오.