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 유형을 확인할 수 있습니다. 아래를 참조하십시오.
스크린 샷
// 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($("<img>").attr("src", fr.result))
.after($("<div>").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($("<div>").text("Real MIME type: " + mimeType(headerString)))
.after($("<div>").text("File header: 0x" + headerString))
.after($("<div>").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( $("<div>").text("It seems your browser doesn't support FileReader") );
} /* Drakes, 2015 */
img {
max-height: 200px
}
div {
height: 26px;
font: Arial;
font-size: 12pt
}
form {
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<input type="file" />
<div>Choose an image to see its file signature.</div>
</form>
<hr/>
I want to perform a client side checking to avoid unnecessary wastage of server resource.서버 쪽에서 유효성 검사를 수행해야하는 이유를 이해하지 못했지만 서버 리소스를 줄이려고한다고 말합니다. 황금률 : 절대 사용자 입력을 신뢰하지 않습니다 . 서버 측에서 MIME 유형을 확인하는 경우 클라이언트 측에서 MIME 유형을 확인하는 것이 중요합니다. 확실히 "불필요한 고객 자원 낭비 "입니까?