फॉर्म सबमिट करते समय फ़ाइल प्रकार की जांच करें?

Question

मैं प्रपत्र follwing क्षेत्रों होने है,

<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data"> 
    <label>Type:*</label> 
    <label for="type-1"> 
    <input type="radio" checked="checked" value="1" id="type-1" name="type">Image 
    </label> 
    <br> 
    <label for="type-2"> 
    <input type="radio" value="2" id="type-2" name="type">Video 
    </label> 
    <label class="itemdetailfloatL required" for="file">File:*</label> 
    <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE"> 
    <input type="file" tabindex="5" class="text-size text" id="file" name="file"> 
<input type="submit" value="Create" id="submit" name="submit"> 
</form> 

मैंने पहले प्रपत्र सबमिट मान्य करने के लिए चाहते हैं। अगर उपयोगकर्ता छवि के रूप में टाइप करें और वीडियो अपलोड करें या वीडियो के रूप में टाइप करें और छवि अपलोड करें तो मैं कैसे सत्यापित कर सकता हूं?

हम इसे जावास्क्रिप्ट या jquery द्वारा प्राप्त कर सकते हैं। इसे सत्यापित करने के लिए कोई भी त्वरित तरीका?

कृपया इस पर मेरी सहायता करें।

Answer 1

onsubmit उपयोग करने के बजाय, jQuery के हैंडलर प्रस्तुत उपयोग करें, और निम्न जैसे कुछ जावास्क्रिप्ट का उपयोग कर सत्यापित करें:

function getExtension(filename) { 
    var parts = filename.split('.'); 
    return parts[parts.length - 1]; 
} 

function isImage(filename) { 
    var ext = getExtension(filename); 
    switch (ext.toLowerCase()) { 
    case 'jpg': 
    case 'gif': 
    case 'bmp': 
    case 'png': 
     //etc 
     return true; 
    } 
    return false; 
} 

function isVideo(filename) { 
    var ext = getExtension(filename); 
    switch (ext.toLowerCase()) { 
    case 'm4v': 
    case 'avi': 
    case 'mpg': 
    case 'mp4': 
     // etc 
     return true; 
    } 
    return false; 
} 

$(function() { 
    $('form').submit(function() { 
     function failValidation(msg) { 
      alert(msg); // just an alert for now but you can spice this up later 
      return false; 
     } 

     var file = $('#file'); 
     var imageChosen = $('#type-1').is(':checked'); 
     if (imageChosen && !isImage(file.val())) { 
      return failValidation('Please select a valid image'); 
     } 
     else if (!imageChosen && !isVideo(file.val())) { 
      return failValidation('Please select a valid video file.'); 
     } 

     // success at this point 
     // indicate success with alert for now 
     alert('Valid file! Here is where you would return true to allow the form to submit normally.'); 
     return false; // prevent form submitting anyway - remove this in your environment 
    }); 

}); 

jsFiddle संस्करण यहाँ, IE8, RockMelt में परीक्षण (क्रोम के आधार पर) और Firefox 7: http://jsfiddle.net/Ngrbj/4/

Answer 2

आप इस कोशिश कर सकते हैं:

function getFile(fieldId) { 
    var fileInsert = document.getElementById(fieldId).value; 
     fileName = fileName.split('/'); 
     fileName = fileName[fileName.length]; 
     extentions = fileName.split('.'); 
     extentions = extentions[extentions.length]; 
    return extentions; 
} 

आप अपने checkcreateform()

Answer 3

पहले में इस सुविधा का उपयोग कर सकते हैं आप इस तरह अपने html बदलना चाहिए: फिर

<input type="file" tabindex="5" class="text-size text" id="file" name="file" onchange="checkeExtension(this.value,"submit");"> 

, आप एक समारोह की जरूरत है इस तरह:

///image 1 and video 2 
//you can extend file types 
var types= { 
    'jpg' :"1", 
    'avi' :"2", 
    'png' :"1", 
    "mov" : "2", 
} 

function checkeExtension(filename,submitId) { 
    var re = /\..+$/; 
    var ext = filename.match(re); 
    var type = $("input[type='radio']:checked").val(); 
    var submitEl = document.getElementById(submitId); 

    if (types[ext] == type) { 
     submitEl.disabled = false; 
     return true; 
    } else { 
     alert("Invalid file type, please select another file"); 
     submitEl.disabled = true; 
     return false; 
    } 
} 

Answer 4

इनपुट पर फ़ाइलों संपत्ति का उपयोग करना: फ़ाइल की वस्तुओं के माध्यम से पाश कर सकते हैं फ़ाइल और प्रकार संपत्ति की जाँच

$('#upload').on("change", function(){ 
 
    
 
     var sel_files = document.getElementById('upload').files; 
 
     var len = sel_files.length; 
 
    
 
     for (var i = 0; i < len; i++) { 
 

 
      var file = sel_files[i]; 
 
      
 
      if (!(file.type==='application/pdf')) { 
 
      continue; 
 
      } 
 
      } 
 

 
     });

<div class="modal"> 
 
    <form id="form-upload"> 
 
    <input type="file" name="upload" id="upload" multiple> 
 
    <br/> 
 
     
 
</form> 
 
</div>

Answer 5

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

var extensionLists = {}; //Create an object for all extension lists 
extensionLists.video = ['m4v', 'avi','mpg','mp4', 'webm']; 
extensionLists.image = ['jpg', 'gif', 'bmp', 'png']; 

// One validation function for all file types  
function isValidFileType(fName, fType) { 
    return extensionLists[fType].indexOf(fName.split('.').pop()) > -1; 
} 

अगर बयान फिर, कोड सिर्फ है साथ बदली:

if (imageChosen && !isValidFileType(file.val(), 'image')) { 
     return failValidation('Please select a valid image'); 
    } 
else if (!imageChosen && !isValidFileType(file.val(), 'video')) { 
     return failValidation('Please select a valid video file.'); 
    }