फ़ाइल अपलोड करने से पहले फ़ाइल एक्सटेंशन का सत्यापन

90

मैं एक सर्वलेट में चित्र अपलोड कर रहा हूं। मान्यता है कि क्या अपलोड की गई फ़ाइल एक छवि है, सर्वर साइड में ही है, फ़ाइल हेडर में मैजिक नंबरों की जांच करके। क्या सर्वलेट के लिए फ़ॉर्म जमा करने से पहले ग्राहक पक्ष में एक्सटेंशन को मान्य करने का कोई तरीका है? जैसे ही मैं हिट दर्ज करता हूं यह अपलोड होना शुरू हो जाता है।

मैं ग्राहक पक्ष में जावास्क्रिप्ट और jQuery का उपयोग कर रहा हूं।

अद्यतन: मैं अंत में सर्वर साइड सत्यापन के साथ समाप्त हो गया था जो बाइट्स को पढ़ता है और अपलोड को अस्वीकार करता है यदि यह एक छवि नहीं है।

javascript  jquery  validation  file-upload 
2
आप अपने पिछले प्रश्नों में से एक के रूप में अपलोड करें का उपयोग कर रहे हैं, है ना?
— बालुसक
नहीं, यह 50-96 के बीच रुकता है। विभिन्न इनपुट्स के साथ कई बार कोशिश की। और, मैं भी उस समय एक समाधान के लिए जल्दी में था। इसलिए, मैंने सरल करने की कोशिश की jquery.ProgressBar.js। यह बढ़िया काम करता है। ### तो, मैं अपलोड के साथ मान्य कर सकते हैं !!!
— प्रशोभ
क्या हम केवल यह सुनिश्चित करने के लिए इनपुट टैग में स्वीकार विशेषता का उपयोग नहीं कर सकते कि उपयोगकर्ता निर्दिष्ट प्रारूप की फ़ाइल का चयन करता है?
— अन्नसर

जवाबों:

117

यह केवल फ़ाइल एक्सटेंशन की जांच करना संभव है, लेकिन उपयोगकर्ता वायरस से आसानी से नाम बदलकर virus.jpg और सत्यापन को "पास" कर सकता है।

इसके लायक क्या है, यहां फ़ाइल एक्सटेंशन की जांच करने का कोड है और वैध एक्सटेंशन में से एक नहीं मिलने पर गर्भपात करें: (अमान्य फ़ाइल चुनें और कार्रवाई में अलर्ट देखने के लिए सबमिट करने का प्रयास करें)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}
<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>
स्निपेट का विस्तार करें

ध्यान दें, कोड उपयोगकर्ता को फ़ाइल चुनने के बिना भेजने की अनुमति देगा ... यदि आवश्यक हो, तो लाइन को हटा दें if (sFileName.length > 0) { और यह समापन कोष्ठक सहयोगी है। कोड फॉर्म में किसी भी फ़ाइल इनपुट को मान्य करेगा, चाहे उसका नाम कुछ भी हो।

यह कम लाइनों में jQuery के साथ किया जा सकता है, लेकिन मैं "कच्चे" जावास्क्रिप्ट के साथ पर्याप्त आरामदायक हूं और अंतिम परिणाम समान है।

यदि आपके पास अधिक फ़ाइलें हैं, या फ़ाइल को बदलने पर चेक को ट्रिगर करना चाहते हैं और न केवल फ़ॉर्म सबमिट करने में, इसके बजाय ऐसे कोड का उपयोग करें:

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />
स्निपेट का विस्तार करें

यह अमान्य फ़ाइल एक्सटेंशन के मामले में अलर्ट दिखाएगा और इनपुट रीसेट करेगा।

— शैडो विजार्ड ईयर फॉर यू है
स्रोत
मैं यह जोड़ना चाहूंगा कि "onChange" के बजाय "onSubmit" का उपयोग करना बोझिल है - खासकर अगर "कई" विकल्प का उपयोग किया जाता है। प्रत्येक फ़ाइल की जाँच की जानी चाहिए क्योंकि यह चयनित है, न कि जब पूरा फॉर्म पोस्ट किया गया हो।
— DevlshOne
@DevlshOne दिलचस्प विचार, इस पोस्ट में भी इसका उल्लेख करेगा। धन्यवाद!
— शैडो विजार्ड आपके लिए ईयर
इस कोड @Shadow जादूगर के लिए बहुत बहुत धन्यवाद। यह वास्तव में मेरी बहुत मदद की!
— अनाहत ग़ज़रीन
1
@garryman कैसे हुआ फेल? यहाँ प्रश्न में फ़ाइल का उल्लेख नहीं है की आवश्यकता है। यदि आपके मामले में फ़ाइल एक आवश्यक फ़ील्ड है, तो आप लाईन var blnValid = false;को गिराने के लिए arrInputs के ऊपर ले जा सकते हैं , फिर लूप के बाद वेरिएबल blnValid की जाँच करें: यदि सही है, तो फॉर्म सबमिट करने दें, अन्यथा अलर्ट दिखाएं कि फाइल की आवश्यकता है।
— शैडो विजार्ड ईआर फॉर यू
मेरे नीचे दिए गए उत्तर की जांच करें
— दिव्येश जानी
72

मौजूदा जवाबों में से कोई भी अनुरोध की सादगी के लिए काफी कॉम्पैक्ट नहीं लग रहा था। यह जाँच करना कि क्या किसी दिए गए फ़ाइल इनपुट फ़ील्ड में एक सेट से एक एक्सटेंशन है, इस प्रकार पूरा किया जा सकता है:

function hasExtension(inputID, exts) {
    var fileName = document.getElementById(inputID).value;
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}

इसलिए उदाहरण उपयोग हो सकता है (जहां uploadहै idएक फ़ाइल इनपुट की):

if (!hasExtension('upload', ['.jpg', '.gif', '.png'])) {
    // ... block upload
}

या एक jQuery प्लगइन के रूप में:

$.fn.hasExtension = function(exts) {
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}

उदाहरण उपयोग:

if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
    // ... block upload
}

.replace(/\./g, '\\.')Regexp के लिए डॉट वहाँ से बचने के लिए इतना है कि बुनियादी एक्सटेंशन किसी भी चरित्र से मेल खाते डॉट्स के बिना में पारित किया जा सकता है।

इनको छोटा रखने के लिए इन पर जाँच करने में कोई त्रुटि नहीं है, संभवतः यदि आप इनका उपयोग करते हैं तो आप सुनिश्चित करेंगे कि इनपुट पहले मौजूद है और एक्सटेंशन सरणी मान्य है!

— Orbling
स्रोत
10
अच्छा लगा। ध्यान दें कि ये स्क्रिप्ट केस संवेदी हैं। इसे सुलझाने के लिए आपको देने की आवश्यकताRexExp the "i" modifier, for example: return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', "i")).test(fileName);
— Tedd हैनसेन
2
पढ़ने में थोड़ा मुश्किल है, लेकिन इसका मतलब है कि , "i"रेगेक्स स्ट्रिंग ( )$') के अंत के बाद जोड़ना । यह फ़ाइल नाम एक्सटेंशन (.jpg, .JPG, .Jpg, आदि ...) में किसी भी आवरण के लिए समर्थन जोड़ देगा
— Tedd Hansen
धन्यवाद, टेड, केस-असंवेदनशील मिलान करना बेहतर होगा।
— परिक्रमा
37 
$(function () {
    $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");

        if (!(regex.test(val))) {
            $(this).val('');
            alert('Please select correct file format');
        }
    });
});
— आशीष पाठक
स्रोत
धन्यवाद, बहुत सरल और साफ।
— Th3_hide
यदि आप रद्द करते हैं, तो यह एक चेतावनी को ट्रिगर करेगा।
— पिनॉयस्टैकऑवरफ्लावर
18

मैं यहाँ आया क्योंकि मुझे यकीन था कि यहाँ कोई भी उत्तर काफी नहीं था ... काव्य:

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}
<input type="file" id="fUpload" onchange="checkextension()"/>
स्निपेट का विस्तार करें

— सेड्रिक इप्किस
स्रोत
यह थोड़ा संशोधन के साथ कोणीय में काम करता है, धन्यवाद
— आकाशदेव
मेरे लिए अच्छी तरह से काम किया है, हालांकि किसी को परीक्षण से पहले नाम से किसी भी अनुगामी रिक्त स्थान को ट्रिम करना चाहिए। +1
— रॉबर्टो
9

जाँच करें कि फ़ाइल चयनित है या नहीं

       if (document.myform.elements["filefield"].value == "")
          {
             alert("You forgot to attach file!");
             document.myform.elements["filefield"].focus();
             return false;  
         }

फ़ाइल एक्सटेंशन की जाँच करें

  var res_field = document.myform.elements["filefield"].value;   
  var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
  var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
  if (res_field.length > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1) 
             {
               alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
               return false;
             }
    }
— रिजवान गिल
स्रोत
8

मुझे यह उदाहरण पसंद है: 

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById('<%= fpImages.ClientID %>');
        var FileUploadPath = fuData.value;

        if (FileUploadPath == '') {
            // There is no file selected 
            args.IsValid = false;
        }
        else {
            var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
            if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
                args.IsValid = true; // Valid file type
                FileUploadPath == '';
            }
            else {
                args.IsValid = false; // Not valid file type
            }
        }
    }
</script>
— kamal.shalabe
स्रोत
7

क्या आप अपलोड प्रकार चुनने के लिए इनपुट प्रकार = "फ़ाइल" का उपयोग करते हैं? यदि हां, तो स्वीकार विशेषता का उपयोग क्यों न करें?

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
— Rouven
स्रोत
यह! accept="image/*"यह निश्चित रूप से ज्यादातर मामलों में सबसे स्मार्ट विकल्प है।
— अल्बर्टो टी।
6

यदि आपको किसी इनपुट फ़ील्ड में दूरस्थ यूआरएल का परीक्षण करने की आवश्यकता है, तो आप उन प्रकारों के साथ एक सरल रेगेक्स का परीक्षण करने का प्रयास कर सकते हैं, जिनमें आप रुचि रखते हैं।

$input_field = $('.js-input-field-class');

if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
  $('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
  return false;
}

यह .gif, .jpg, .jpeg, .tiff या .png में समाप्त होने वाली किसी भी चीज़ को कैप्चर करेगा

मुझे ध्यान देना चाहिए कि ट्विटर जैसी कुछ लोकप्रिय साइटें अपनी छवियों के अंत में एक आकार विशेषता को जोड़ती हैं। उदाहरण के लिए, निम्नलिखित यह परीक्षण विफल होगा भले ही यह एक मान्य छवि प्रकार हो:

https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large

इस वजह से, यह एक सही समाधान नहीं है। लेकिन यह आपको लगभग 90% तक पहुंचा देगा।

— user3789031
स्रोत
4

यह कोशिश करो (मेरे लिए काम करता है)

  
  function validate(){
  var file= form.file.value;
       var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
       if(!file.match(reg))
       {
    	   alert("Invalid File");
    	   return false;
       }
       }
<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>
स्निपेट का विस्तार करें

— AlphaOne
स्रोत
2

आजकल एक और उदाहरण Array.prototyp.some () के माध्यम से ।

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));
स्निपेट का विस्तार करें

— पेनी लियू
स्रोत
1

यहाँ एक अधिक पुन: प्रयोज्य तरीका है, यह मानते हुए कि आप jQuery का उपयोग करते हैं

लाइब्रेरी फ़ंक्शन (jQuery की आवश्यकता नहीं है):

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}


String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }

पृष्ठ समारोह (jQuery की आवश्यकता है)

$("[id*='btnSaveForm']").click(function () {
    if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});
— मीका बी।
स्रोत
1

[टाइपप्रति]

uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];

// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
    return val === uploadedFileType;
});
— mkupiniak
स्रोत
1

आप acceptइनपुट फ़ाइल प्रकारों के लिए उपलब्ध विशेषता का उपयोग कर सकते हैं । चेकआउट MDN प्रलेखन

— Aditibtp
स्रोत
2
इसके साथ आप अभी भी अन्य फ़ाइल प्रकारों का चयन कर सकते हैं
— सेसर लियोन
@ CésarLeón हाँ। उपयोगकर्ता के पास सभी फ़ाइलों का चयन करने का विकल्प है। यदि आप इसे भी प्रतिबंधित करना चाहते हैं, तो आपको मैन्युअल सत्यापन करने की आवश्यकता है। अन्य उत्तरों की जाँच करें।
— मदुरा प्रदीप
1

जब आप ब्राउज़ बटन और फ़ाइल एक्सटेंशन को मान्य करना चाहते हैं, तो इस कोड का उपयोग करें:

function fileValidate(){ 
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file  in .pdf extension ");

return false;
}
— अजय कुमार गुप्ता
स्रोत
1
जब आप ब्राउज़ बटन और फ़ाइल एक्सटेंशन को मान्य करना चाहते हैं, तो इस कोड का उपयोग करें।
— अजय कुमार गुप्ता
0 
<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload your Photo...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
                    document.form.word.focus();
                    return false;
                }
            }
        }

        function Doc_upload() {
            var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload Agreement...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "txt" || filext == "pdf" || filext == "doc") {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload File with Extension ' txt , pdf , doc '");
                    document.form.word.focus();
                    return false;
                }
            }
        }
</script>
— user3060112
स्रोत
3
बेहतर होगा कि आप अपने उत्तर का संक्षिप्त विवरण लिखें।
— रूपेंद्र
0 

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />
स्निपेट का विस्तार करें

— Francin
स्रोत
0

आप एक ऐसा सरणी बना सकते हैं, जिसमें आवश्यक है कि अगर filetype सरणी में मौजूद है, तो जांचने के लिए jQuery में $ .inArray () का उपयोग करें।

var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  

// Given that file is a file object and file.type is string 
// like "image/jpeg", "image/png", or "image/gif" and so on...

if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
  console.log('Not an image type');
}
— जॉन रोका
स्रोत
0

हम इसे सबमिट पर चेक कर सकते हैं या हम उस नियंत्रण की परिवर्तन घटना बना सकते हैं 

var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
    if (filePath != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }
— दिव्येश जानी
स्रोत
-1

यह मेरी राय में सबसे अच्छा समाधान है, जो अन्य लोगों की तुलना में बहुत कम है:

function OnSelect(e) {
    var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
    var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;

    if (!isAcceptedImageFormat) {
        $('#warningMessage').show();
    }
    else {
        $('#warningMessage').hide();
    }
}

इस स्थिति में, फ़ंक्शन को इस सेटिंग के साथ एक Kendo अपलोड नियंत्रण से बुलाया जाता है:

.Events(e => e.Select("OnSelect"))।

— एंड्रयू
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.