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>
ধাপ ২:
আমরা এখন ফাইলগুলি পরীক্ষা করতে পারি এবং শিরোনাম এবং এমআইএমএম প্রকারগুলি টিজ করতে পারি।
✘ দ্রুত পদ্ধতি
আপনি naively অনুরোধ করতে পারেন ব্লব যাই হোক না কেন ফাইল এটা এই প্যাটার্ন ব্যবহার প্রতিনিধিত্ব করে MIME প্রকার জন্য:
var blob = files[i]; // See step 1 above
console.log(blob.type);
চিত্রগুলির জন্য, মাইম টাইমগুলি নিম্নলিখিতগুলির মতো ফিরে আসে:
চিত্র / জেপিইগ
ইমেজ / পিএনজি
...
ক্যাভেট: মাইম টাইপটি ফাইল এক্সটেনশান থেকে সনাক্ত করা হয়েছে এবং বোকা বা স্পোফ করা যেতে পারে। যে কোনও একটিতে একটি নাম পরিবর্তন করতে .jpgপারে .pngএবং মাইমে টাইপ হিসাবে রিপোর্ট করা হবে image/png।
✓ সঠিক শিরোনাম-পরিদর্শন পদ্ধতি
ক্লায়েন্ট-সাইড ফাইলের বোনফাইড এমআইএমআই টাইপ পাওয়ার জন্য আমরা তথাকথিত যাদু সংখ্যার সাথে তুলনা করার জন্য প্রদত্ত ফাইলটির প্রথম কয়েকটি বাইট পরিদর্শন করতে পারি । সতর্ক হোন যে এটি সম্পূর্ণ সোজা নয়, উদাহরণস্বরূপ, জেপিগের কয়েকটি "ম্যাজিক সংখ্যা" রয়েছে। এটি কারণ যে ফর্ম্যাটটি 1991 সাল থেকে বিকশিত হয়েছে You আপনি কেবলমাত্র প্রথম দুটি বাইট চেক করেই পালিয়ে যেতে পারেন তবে আমি মিথ্যা ইতিবাচক হ্রাস করতে কমপক্ষে 4 বাইট পরীক্ষা করা পছন্দ করি।
জেপিজির ফাইল স্বাক্ষরের উদাহরণ (প্রথম 4 বাইট):
এফএফ ডি 8 এফএফ E0 (এসওআই + এডিডি 0)
এফএফ ডি 8 এফএফ ই 1 (এসওআই + এডিডি 1)
এফএফ ডি 8 এফএফ ই 2 (এসওআই + এডিডি 2)
ফাইল শিরোনাম পুনরুদ্ধার করার জন্য এখানে প্রয়োজনীয় কোডটি রয়েছে:
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);
তারপরে আপনি আসল এমআইএমএম টাইপটি ঠিক তেমনভাবে নির্ধারণ করতে পারেন (আরও ফাইলের স্বাক্ষর এখানে এবং এখানে ):
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;
}
প্রত্যাশিত মাইমে টাইপের ভিত্তিতে আপনার পছন্দ মতো ফাইল আপলোডগুলি গ্রহণ বা প্রত্যাখ্যান করুন।
ডেমো
স্থানীয় ফাইল এবং রিমোট ফাইলগুলির জন্য এখানে একটি কার্যকারী ডেমো রয়েছে (আমাকে কেবল এই ডেমোটির জন্য 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($("<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.আপনি কীভাবে বলছেন যে সার্ভারের পাশ দিয়ে বৈধতা অর্জন করতে হবে তা আমি বুঝতে পারি না, তবে তারপরে আপনি বলে যে আপনি সার্ভারের সংস্থানগুলি হ্রাস করতে চান। সুবর্ণ নিয়ম: কখনই ব্যবহারকারীর ইনপুটকে বিশ্বাস করবেন না । ক্লায়েন্ট সাইডে মাইম টাইপ যাচাই করার বিষয়টি যদি আপনি কেবল সার্ভারের পাশে এটি করে থাকেন। অবশ্যই এটি একটি " ক্লায়েন্ট সংস্থান অপ্রয়োজনীয় অপচয় "?