업로드하기 전에 JavaScript에서 파일 MIME 유형을 확인하는 방법
클라이언트 측에서 JavaScript를 사용하여 파일 MIME 유형을 확인할 수 있는 것으로 보이는 질문들을 읽어 보았습니다.실제 검증은 여전히 서버 측에서 수행해야 한다는 것을 이해합니다.불필요한 서버 자원 낭비를 피하기 위해 클라이언트 측 체크를 하고 싶습니다.
할 수 , 「고객측의 확장자를 했습니다.JPEG to test test 。.png이치노파일을 보내기 전에 JavaScript 콘솔을 사용하여 파일 개체를 쿼리합니다.
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 스니핑은 구현되어야 합니다.
현재 JavaScript로 MIME 타입을 확인할 수 있는 방법은 없는 것입니까?아니면 제가 뭘 놓치고 있는 건가요?
JavaScript를 MIME 할 수 .FileReader★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★클라이언트측보다 서버측 체크를 선호하는 것은 동의하지만 클라이언트측 체크는 가능합니다.방법을 보여드리고 하단에 작업 데모를 보여 드리겠습니다.
가 양쪽 모두를 합니다.File ★★★★★★★★★★★★★★★★★」Blob을 사용하다
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}
순서 1:
해서 '찾아올 수 있어요.File<input>다음과 같은 요소(참조):
<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>
위(참조)의 드래그 앤 드롭 버전은 다음과 같습니다.
<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 유형은 다음과 같이 반환됩니다.
/이미지
/png
주의: 파일 확장자에서 MIME 유형이 탐지되어 속이거나 스푸핑될 수 있습니다.이름을 변경할 수 있습니다..jpg a까지.png은 MIME으로 됩니다.image/png.
§ 적절한 헤더 검사 방법
클라이언트측 파일의 bonafide MIME 타입을 취득하려면 한 걸음 더 나아가 주어진 파일의 처음 몇 바이트를 검사하여 이른바 매직 넘버와 비교할 수 있습니다.예를 들어 JPEG에는 몇 개의 "매직 넘버"가 있기 때문에 완전히 간단하지 않다는 점에 유의하십시오.1991년부터 포맷이 진화했기 때문입니다.처음 2바이트만 체크해도 문제없지만 false positive를 줄이기 위해 최소 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/>다른 답변과 같이 파일의 첫 번째 바이트에 있는 파일의 서명을 확인함으로써 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
이 유틸리티(es6 참조)를 사용하여 모든 것을 메모리에 로드하지 않도록 첫 번째 X바이트 읽기만 하자는 Vitim.us의 제안을 결합할 수 있습니다.
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);
다음은 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">한 파일을 .<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');
}
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에서 테스트되었습니다.
MIME 유형의 전체 목록은 Wikipedia를 참조하십시오.
매직 넘버의 전체 목록은 위키피디아를 참조하십시오.
몇 가지 파일 유형을 더 확인해야 했어요.
Drakes가 준 훌륭한 답변에 따라, 나는 이 웹사이트에서 매우 광범위한 파일 유형과 헤더가 있는 것을 발견하고 다음과 같은 코드를 생각해냈다.16진수 및 문자열 모두.
또, 현재 작업하고 있는 프로젝트와 관련된 많은 파일이나 그 외의 문제에도 대응할 수 있는 비동기 기능이 필요했습니다.
여기 바닐라 자바스크립트로 된 코드가 있습니다.
// getFileMimeType
// @param {Object} the file object created by the input[type=file] DOM element.
// @return {Object} a Promise that resolves with the MIME type as argument or undefined
// if no MIME type matches were found.
const getFileMimeType = file => {
// Making the function async.
return new Promise(resolve => {
let fileReader = new FileReader();
fileReader.onloadend = event => {
const byteArray = new Uint8Array(event.target.result);
// Checking if it's JPEG. For JPEG we need to check the first 2 bytes.
// We can check further if more specific type is needed.
if(byteArray[0] == 255 && byteArray[1] == 216){
resolve('image/jpeg');
return;
}
// If it's not JPEG we can check for signature strings directly.
// This is only the case when the bytes have a readable character.
const td = new TextDecoder("utf-8");
const headerString = td.decode(byteArray);
// Array to be iterated [<string signature>, <MIME type>]
const mimeTypes = [
// Images
['PNG', 'image/png'],
// Audio
['ID3', 'audio/mpeg'],// MP3
// Video
['ftypmp4', 'video/mp4'],// MP4
['ftypisom', 'video/mp4'],// MP4
// HTML
['<!DOCTYPE html>', 'text/html'],
// PDF
['%PDF', 'application/pdf']
// Add the needed files for your case.
];
// Iterate over the required types.
for(let i = 0;i < mimeTypes.length;i++){
// If a type matches we return the MIME type
if(headerString.indexOf(mimeTypes[i][0]) > -1){
resolve(mimeTypes[i][1]);
return;
}
}
// If not is found we resolve with a blank argument
resolve();
}
// Slice enough bytes to get readable strings.
// I chose 32 arbitrarily. Note that some headers are offset by
// a number of bytes.
fileReader.readAsArrayBuffer(file.slice(0,32));
});
};
// The input[type=file] DOM element.
const fileField = document.querySelector('#file-upload');
// Event to detect when the user added files.
fileField.onchange = event => {
// We iterate over each file and log the file name and it's MIME type.
// This iteration is asynchronous.
Array.from(fileField.files, async file => {
console.log(file.name, await getFileMimeType(file));
});
};
getFileMimeType 함수에서는 2가지 접근방식을 사용하여 올바른 MIME 유형을 찾을 수 있습니다.
- 바이트를 직접 검색합니다.
- 바이트를 문자열로 변환한 후 문자열을 검색합니다.
JPEG에서 첫 번째 접근 방식을 사용했습니다.왜냐하면 JPEG를 식별할 수 있는 것은 첫 번째 2바이트이고 그 바이트는 읽기 어려운 문자열 문자이기 때문입니다.
나머지 파일 형식에서 읽을 수 있는 문자열 서명이 있는지 확인할 수 있었습니다.예: [video/mp4]-> 'ftypmp4' 또는 'ftypisom'
Gary Kessler 목록에 없는 파일을 지원해야 할 경우 바이트 또는 변환된 문자열을 console.log()하여 지원해야 하는 불분명한 파일의 적절한 서명을 찾을 수 있습니다.
주의 1: Gary Kessler 목록이 갱신되어 MP4 시그니처가 바뀌었습니다.이것을 실장할 때는, 확인해 주세요.주2: Array.from은 두 번째 인수로 .map like 함수를 사용하도록 설계되었습니다.
다음은 Roberto14의 답변을 확장한 것입니다.
이미지만 허용됩니다.
FileReader를 사용할 수 있는지 확인하고 사용할 수 없는지 확인하는 확장자로 폴백합니다.
이미지가 아닌 경우 오류 경고를 표시합니다.
이미지인 경우 미리보기를 로드합니다.
** 서버측 검증도 실시해야 합니다.최종사용자에게 가장 편리합니다.하지만 그것은 편리해요!
<form id="myform">
<input type="file" id="myimage" onchange="readURL(this)" />
<img id="preview" src="#" alt="Image Preview" />
</form>
<script>
function readURL(input) {
if (window.FileReader && window.Blob) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function() {
var preview = document.getElementById('preview');
preview.src = e.target.result;
};
img.onerror = function() {
alert('error');
input.value = '';
};
img.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
else {
var ext = input.value.split('.');
ext = ext[ext.length-1].toLowerCase();
var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp', 'gif'];
if (arrayExtensions.lastIndexOf(ext) == -1) {
alert('error');
input.value = '';
}
else {
var preview = document.getElementById('preview');
preview.setAttribute('alt', 'Browser does not support preview.');
}
}
}
</script>
다음은 브라우저의 최소 타입 스크립트/프로미스 유틸리티입니다.
export const getFileHeader = (file: File): Promise<string> => {
return new Promise(resolve => {
const headerBytes = file.slice(0, 4); // Read the first 4 bytes of the file
const fileReader = new FileReader();
fileReader.onloadend = (e: ProgressEvent<FileReader>) => {
const arr = new Uint8Array(e?.target?.result as ArrayBufferLike).subarray(
0,
4,
);
let header = '';
for (let i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
resolve(header);
};
fileReader.readAsArrayBuffer(headerBytes);
});
};
이와 같이 검증에 사용합니다(PDF 체크가 필요했습니다).
// https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
const pdfBytePattern = "25504446"
const fileHeader = await getFileHeader(file)
const isPdf = fileHeader === pdfBytePattern // => true
Png 파일에는 확인할 수 있는 특정 파일 형식이 있기 때문에 Png 파일의 경우 일부 매직헤더 바이트를 확인하는 것보다 더 많은 검사를 수행할 수 있습니다.
TLDR: 일련의 청크가 특정 순서로 있어야 하며 각 청크에는 유효한지 확인할 수 있는 CRC 오류 수정 코드가 있습니다.
https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_format
청크 레이아웃이 올바른지 검사하는 작은 라이브러리를 만들었습니다. 각 청크의 CRC 코드가 유효한지 검사합니다.여기서 npm 패키지로 사용할 수 있습니다.
https://www.npmjs.com/package/png-validator
단답은 '아니오'입니다.
아시다시피 브라우저는type파일 확장자를 사용합니다.Mac의 프리뷰도 확장자가 아닌 것 같습니다.디스크에서 파일을 찾아 읽는 것보다 포인터에 포함된 파일 이름을 읽는 것이 더 빠르기 때문일 것입니다.
png로 이름을 바꾼 jpg를 복사했습니다.
두 이미지 모두 크롬으로 일관되게 아래를 얻을 수 있었습니다(현대 브라우저에서는 동작합니다).
ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90
String.indexOf('jpeg')에서 이미지 유형을 체크할 수 있습니다.
여기 http://jsfiddle.net/bamboo/jkZ2v/1/를 탐색하는 데 도움이 되는 정보가 있습니다.
이 예에서 언급하는 것을 잊은 양심의 가책을 느끼는 행
console.log( /^(.*)$/m.exec(window.atob( image.src.split(',')[1] )) );
- Base64로 인코딩된 img 데이터를 분할하여 이미지에 남깁니다.
- Base64는 이미지를 디코딩합니다.
- 이미지 데이터의 첫 번째 줄에만 일치합니다.
바이올린 코드는 IE9에서는 동작하지 않는 base64 디코딩을 사용하고 있습니다.IE http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html에서 동작하는 VB 스크립트를 사용한 좋은 예를 찾았습니다.
이미지를 로드하기 위한 코드는 Joel Vardy가 가져왔습니다.Joel Vardy는 업로드하기 전에 클라이언트 측에서 이미지 캔버스 크기를 조정하는 작업을 하고 있습니다.이 작업은 https://joelvardy.com/writing/javascript-image-upload에 관심을 가질 수 있습니다.
언급URL : https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload
'programing' 카테고리의 다른 글
| 도커 컨테이너, 메모리 소비량 및 로그 (0) | 2022.12.26 |
|---|---|
| 예외가 발생하지 않았는지 테스트하려면 어떻게 해야 합니까? (0) | 2022.12.26 |
| 특별한 HTML 엔티티가 포함된 문자열을 디코딩하는 올바른 방법은 무엇입니까? (0) | 2022.12.26 |
| python .replace() regex (0) | 2022.12.26 |
| JSON 웹 토큰을 무효화하는 중 (0) | 2022.12.06 |