Lato client, cioè "sul browser", è possibile fare un check.
Ho trovato questo snippet di codice che dovrebbe fare ciò che cerchi, ma comunque il controllo finale dovresti farlo lato server, dove hai più controllo
Come HTML avrai qualcosa di questo generecodice:/** * 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; }); };
Testalo e poi apporta le opportune modifiche al codice di "onchange" per adattarsi alla tua logicacodice:<input type="file" id="fileInput"> <div id="output"></div>
Riferimento: https://tiny.top/u/YRzO7HEh

Rispondi quotando
