आप FileReaderसर्वर पर अपलोड करने से पहले जावास्क्रिप्ट के साथ फ़ाइल MIME प्रकार को आसानी से निर्धारित कर सकते हैं । मैं सहमत हूं कि हमें क्लाइंट-साइड पर सर्वर-साइड चेकिंग को प्राथमिकता देनी चाहिए, लेकिन क्लाइंट-साइड चेकिंग अभी भी संभव है। मैं आपको दिखाता हूँ कि कैसे और नीचे एक कार्यशील डेमो प्रदान करता है।
जांचें कि आपका ब्राउज़र दोनों का समर्थन करता है 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>
यहाँ उपरोक्त ( 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 प्रकारों को छेड़ सकते हैं।
✘ त्वरित विधि
आप भोलेपन से पूछ सकते हैं ब्लॉब जो कुछ फ़ाइल यह इस पद्धति का उपयोग कर का प्रतिनिधित्व करता है के MIME प्रकार के लिए:
var blob = files[i]; // See step 1 above
console.log(blob.type);
छवियों के लिए, MIME प्रकार निम्नलिखित की तरह वापस आते हैं:
छवि / जेपीईजी
छवि / पीएनजी
...
कैविएट: MIME प्रकार को फ़ाइल एक्सटेंशन से पता लगाया जाता है और इसे मूर्ख या स्पूफ किया जा सकता है। कोई एक का नाम बदल सकता .jpgहै .pngऔर MIME प्रकार के रूप में रिपोर्ट किया जाएगा image/png।
✓ उचित हेडर-निरीक्षण विधि
एक क्लाइंट-साइड फ़ाइल के बोनाफाइड माइम प्रकार को प्राप्त करने के लिए हम एक कदम आगे जा सकते हैं और तथाकथित जादू संख्याओं के खिलाफ तुलना करने के लिए दिए गए फ़ाइल के पहले कुछ बाइट्स का निरीक्षण कर सकते हैं । चेतावनी दी कि यह पूरी तरह से सीधा नहीं है क्योंकि, उदाहरण के लिए, जेपीईजी में कुछ "मैजिक नंबर" हैं। इसका कारण यह है कि यह प्रारूप 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 प्रकारों के आधार पर फ़ाइल अपलोड स्वीकार या अस्वीकार करें।
डेमो
यहां स्थानीय फ़ाइलों और दूरस्थ फ़ाइलों के लिए एक कार्यशील डेमो है (मुझे इस डेमो के लिए केवल कॉर्स को बायपास करना था)। स्निपेट खोलें, इसे चलाएं, और आपको विभिन्न प्रकार के तीन दूरस्थ चित्र प्रदर्शित होने चाहिए। शीर्ष पर आप एक स्थानीय छवि या डेटा फ़ाइल का चयन कर सकते हैं , और फ़ाइल हस्ताक्षर और / या 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 प्रकार की जाँच करने का क्या मतलब है यदि आप तब सर्वर साइड पर कर रहे हैं। निश्चित रूप से यह " ग्राहक संसाधन का अनावश्यक अपव्यय " है?