अपलोड पर jQuery प्रतिबंधित फ़ाइल प्रकार कैसे हैं?

Question

मैं एक फ़ाइल अपलोड क्षेत्र jQuery की सीमा केवल jpg / jpeg, png, और gif में रखना चाहूंगा। मैं PHPपहले से बैकएंड चेकिंग कर रहा हूं । मैं JavaScriptपहले से ही एक फ़ंक्शन के माध्यम से अपना सबमिट बटन चला रहा हूं, इसलिए मुझे वास्तव में यह जानना होगा कि सबमिट या अलर्ट से पहले फ़ाइल प्रकारों की जांच कैसे करें।

Answer 1

आप किसी अन्य फ़ील्ड की तरह ही फ़ाइल फ़ील्ड का मान प्राप्त कर सकते हैं। आप इसे बदल नहीं सकते, हालाँकि।

तो सतही रूप से जांच लें कि क्या किसी फ़ाइल का सही एक्सटेंशन है, आप कुछ इस तरह से कर सकते हैं:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Comments

और इसे अपने फॉर्म में $("#my_upload_form").bind("submit", function() { // above check });

— बाँधें

आप इस्तेमाल कर सकते हैं$('#file_field').change(function(){// above check});

— makki

$("#my_upload_form").bind("submit", function() { // above check });अब $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit का उपयोग करके बाध्य होना चाहिए । आप का उपयोग कर फॉर्म जमा करने से भी रोक सकते हैं$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });

— लियाम

इस स्थिति में, यदि उपयोगकर्ता ".jpg" MS Word फ़ाइल में उदाहरण के लिए जोड़ देगा, तो FileUpload इस फ़ाइल को चित्र के रूप में स्वीकार करेगा। मुझे लगता है कि यह सही नहीं है।

— जेहुं

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

— क्रिस

Answer 2

इस कार्य के लिए कोई प्लगइन आवश्यक नहीं है। यह एक जोड़े से अन्य लिपियों से जुड़ा हुआ है:

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

जब तक वैध फ़ाइल प्रकार का चयन नहीं किया जाता है, तब तक यहां चाल अपलोड बटन को अक्षम करने के लिए है।

Comments

सॉरी भाई, लेकिन यह एक बुरा रेगेक्स है। फ़ाइलों को इसके नाम पर डॉट्स रखने की अनुमति है। "giel.asd.aaaaa.jpg.png" .match (/\.(++$$/)

— टिम

Answer 3

आप jQuery के लिए सत्यापन प्लगइन का उपयोग कर सकते हैं: http://docs.jquery.com/Plugins/Validation

ऐसा होता है कि एक स्वीकार () नियम होता है जो आपकी आवश्यकता के अनुसार होता है: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

ध्यान दें कि फ़ाइल एक्सटेंशन को नियंत्रित करना बुलेट प्रूफ नहीं है क्योंकि यह फ़ाइल के mimetype से संबंधित नहीं है। तो आपके पास एक .png हो सकता है जो एक शब्द दस्तावेज़ और एक .doc है जो एक पूरी तरह से मान्य png छवि है। तो अधिक नियंत्रण सर्वर साइड बनाने के लिए मत भूलना;)

Comments

आप IE11 पर plugins.krajee.com/file-input#option-allowedfileextensions के साथ इस का उपयोग करने के लिए उदाहरण प्रदान कर सकते हैं

— shorif2000

Answer 4

यदि आप किसी फ़ाइल फ़ील्ड का उपयोग कर रहे हैं तो फ्रंट-एंड के लिए ' स्वीकार ' विशेषता रखना बहुत सुविधाजनक है ।

उदाहरण:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

कुछ महत्वपूर्ण नोट्स:

• स्वीकार विशेषता इंटरनेट एक्सप्लोरर 10, फ़ायरफ़ॉक्स, ओपेरा, क्रोम और सफारी 6 में समर्थित है।
• यह अलग ब्राउज़र से फ़ाइल ब्राउज़र संवाद में फ़ाइल एक्सटेंशन के लिए पाठ दिखाएगा।

Comments

JQuery का उपयोग करने से बहुत बेहतर है

— क्रिस्टोफर ग्रिग

Answer 5

उपयोगकर्ता जो कुछ भी झूठ बोल रहा है, उस पर MIME के ​​बजाय जाँच नहीं करना चाहता? यदि ऐसा है तो यह एक पंक्ति से कम है:

<input type="file" id="userfile" accept="image/*|video/*" required />

Comments

वह नहीं है जो उसकी जरूरत है यह सिर्फ अलग-अलग एक्सटेंशन वाले फ़ोल्डर से एक छवि का चयन करने के लिए आसान हैंडलिंग के लिए है। जैसा कि आप यहाँ देख सकते हैं -> imageshack.us/a/img20/8451/switchzz.jpg

— bernte

जैसा कि यह IE <10 को चोट नहीं पहुंचाता है, और अन्य कोड को चोट नहीं पहुंचाता है, यह उस पर एक प्रभावी प्रतिबंध है जिसे आप प्रतिबंधित करने की कोशिश कर रहे हैं।

— सिंह

Answer 6

मेरे मामले के लिए मैंने निम्नलिखित कोड का उपयोग किया:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }

Answer 7

मैं वर्किंग कोड उदाहरण लिखने की कोशिश करता हूं, मैं इसका परीक्षण करता हूं और सब कुछ काम करता है।

हरे कोड है:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

जावास्क्रिप्ट:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

Answer 8

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

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

Answer 9

यह उदाहरण केवल पीएनजी छवि अपलोड करने की अनुमति देता है।

एचटीएमएल

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

जे एस

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

Comments

क्या आप कृपया सुझाव दे सकते हैं कि छवि का आकार कैसे सीमित करें। उदाहरण के लिए,

— 10mb

@PDSSandeep इस लिंक की जाँच करें pls stackoverflow.com/questions/6575159/…

— डेवलपर

Answer 10

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

Comments

यह फ़ाइल प्रकार और आकार की जांच नहीं कर सकता है, एफएफ में परीक्षण किया गया है।

— क़मर फ़िरोज़

Answer 11

यदि आप एकाधिक (html 5) फ़ाइल अपलोड के साथ काम कर रहे हैं, तो मैंने शीर्ष सुझाई गई टिप्पणी को लिया और इसे थोड़ा संशोधित किया:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }

Answer 12

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

Answer 13

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

Answer 14

यहाँ जावास्क्रिप्ट सत्यापन के लिए एक सरल कोड है, और यह मान्य होने के बाद यह इनपुट फ़ाइल को साफ करेगा।

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}