jQuery - इनपुट प्रकार = फ़ाइल, छवि फ़ाइल टाइप सत्यापन विकल्प?

Question

मैं निम्नलिखित है:

<input id="user_profile_pic" name="user[profile_pic]" type="file"> 

सर्वर मुझे यकीन है कि यह एक छवि है करने के लिए जाँच पर, लेकिन मैं पहले clientside पर जाँच करना चाहते हैं।

jQuery के साथ कैसे मैं उपयोगकर्ता को चेतावनी दे सकता हूं अगर फ़ाइल इनपुट फ़ाइल चयनित है gif, jpg, png, या bmp नहीं है?

धन्यवाद

Answer 1

आप क्या तत्व का मान, की तर्ज पर कुछ है जाँच करना चाहते हैं:

$("#user_profile_pic").change(function() { 

    var val = $(this).val(); 

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
     case 'gif': case 'jpg': case 'png': 
      alert("an image"); 
      break; 
     default: 
      $(this).val(''); 
      // error message here 
      alert("not an image"); 
      break; 
    } 
}); 

संपादित

कोड टिप्पणी के आधार पर बदल गया है - अब चयनित फ़ाइल के मान को हटा अगर कोई छवि नहीं है।

Answer 2

आप रेगुलर एक्सप्रेशन का उपयोग कर सकते हैं:

var val = $("#user_profile_pic").val(); 
if (!val.match(/(?:gif|jpg|png|bmp)$/)) { 
    // inputted file path is not an image of one of the above types 
    alert("inputted file path is not an image!"); 
} 

बेशक आप नियमित अभिव्यक्ति के लिए और अधिक स्वरूपों जोड़ सकते हैं। इसे पूरा करने के लिए और अधिक जटिल और व्यापक तरीके हैं, लेकिन यह विधि तब तक कार्य को पूरा करेगी जब तक कि छवि फ़ाइल पथ इनपुट मानक छवि फ़ाइल एक्सटेंशन में समाप्त न हो जाए।

Answer 3

ऐसे ब्राउज़र हो सकते हैं जो आपको दिए गए पथ के <img/> बनाने की अनुमति दें, जिससे आप जांच सकें कि यह वास्तविक छवि है या नहीं (अगर आतंक-घटना को छवि पर आग लगनी चाहिए और इसकी चौड़ाई होगी/0 की ऊंचाई)।

लेकिन यह केवल कुछ ब्राउज़रों में काम करता है और एक सुरक्षा जोखिम (मेरे दिमाग में) मैं ऐसा करने का सुझाव नहीं दूंगा, इसलिए मेरा जवाब है: आप कुछ भी मान्य नहीं कर सकते हैं।

एलेक्स द्वारा सुझाए गए फ़ाइल-एक्सटेंशन की जांच करना एक विकल्प हो सकता है, लेकिन फ़ाइल-एक्सटेंशन गारंटी नहीं देता है कि यह छवि है या नहीं। हालांकि, एक साधारण प्री-चेक (सत्यापन नहीं) के रूप में यह उपयोगी हो सकता है।

Answer 4

यह किसी भी जावास्क्रिप्ट सत्यापन की आवश्यकता नहीं है। बस इसे लिखें और यह केवल छवि फ़ाइलों को स्वीकार करेगा।

<input type="file" multiple accept='image/*'> 

Answer 5

हम कैसे जांच सकते हैं कि उपयोगकर्ता छवि फ़ाइल का चयन करता है?

• फाइल एक्सटेंशन सत्यापन
  यह यहाँ पारित
• input[type=file][accept=image/*] यह शुरू में उपयोगकर्ता से non-image फ़ाइलों को छुपाता है काम के रूप में उम्मीद, .png विस्तार के साथ पाठ फ़ाइल है के द्वारा। लेकिन यह फ़िल्टर एक्सटेंशन द्वारा भी काम करता है। और उपयोगकर्ता अभी भी किसी मौजूदा फ़ाइल नाम को मैन्युअल रूप से दर्ज कर सकता है।

• हम परिणाम dataUrl के माइम प्रकार की जांच कर सकते हैं, यह data:mimetype;base64,... से शुरू होता है। तो, हमें image/* माइमटाइप की आवश्यकता है।

  var file = $('#uploadfile'); 
  file.on('change', function (e) { 
      var reader = new FileReader(); 
  
      reader.onload = function() { 
       var data = reader.result; 
       if (data.match(/^data:image\//)) { 
        $('#thumbnail').attr('src', data); 
       } else { 
        console.error('Not an image'); 
       } 
      }; 
  
      reader.readAsDataURL(file.prop('files')[0]); 
  });