केवल छवि फ़ाइलों को स्वीकार करने के लिए <इनपुट प्रकार = "फ़ाइल"> कैसे अनुमति दें?

375

मुझे <input type="file">टैग के माध्यम से केवल छवि फ़ाइल अपलोड करने की आवश्यकता है ।

अभी, यह सभी फ़ाइल प्रकारों को स्वीकार करता है। लेकिन, मैं इसे केवल विशिष्ट छवि फ़ाइल एक्सटेंशन तक सीमित करना चाहता हूं जिसमें शामिल हैं .jpg, .gifआदि।

मैं इस कार्यक्षमता को कैसे प्राप्त कर सकता हूं?

html

— kbvishnu
स्रोत

तकनीक ने सर्वर-साइड का क्या उपयोग किया है?

— एरडाल जी।

1

kbvishnu, शायद आप बहुत पहले स्वीकार किए गए उत्तर पर पुनर्विचार कर सकते हैं। आपको दूसरा उत्तर स्वीकार करने की आवश्यकता नहीं है। मैं केवल सुझाव दे रहा हूं, अन्य उत्तरों की तुलना में हमें उत्तर और उसके वोटों के स्तर पर झंडे की संख्या के आधार पर, कि शायद आपको कम से कम इसे अस्वीकार करने पर विचार करना चाहिए।

— हारून हॉल

942

इनपुट टैग की स्वीकार विशेषता का उपयोग करें । तो केवल PNG, JPEG और GIF को स्वीकार करने के लिए आप निम्नलिखित कोड का उपयोग कर सकते हैं:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

स्निपेट का विस्तार करें

या केवल:

<input type="file" name="myImage" accept="image/*" />

स्निपेट का विस्तार करें

ध्यान दें कि यह केवल ब्राउज़र को संकेत देता है कि उपयोगकर्ता को किस फ़ाइल-प्रकार को प्रदर्शित करना है, लेकिन इसे आसानी से देखा जा सकता है, इसलिए आपको हमेशा सर्वर पर अपलोड की गई फ़ाइल को भी मान्य करना चाहिए।

यह IE १०+, क्रोम, फ़ायरफ़ॉक्स, सफारी ६+, ओपेरा १५+ में काम करना चाहिए, लेकिन मोबाइल (२०१५ के अनुसार) पर समर्थन बहुत स्केच है और कुछ रिपोर्टों से यह वास्तव में कुछ मोबाइल ब्राउज़रों को कुछ भी अपलोड करने से रोक सकता है, इसलिए अपने लक्ष्य प्लेटफार्मों का अच्छी तरह से परीक्षण करना सुनिश्चित करें।

विस्तृत ब्राउज़र समर्थन के लिए, http://caniuse.com/#feat=input-file-accept देखें

— पागल हँसा
स्रोत

@ कामचोर accept="file/csv, file/xls"क्या यह मान्य है ??

— KNU

19

क्या आपको यकीन है image/x-png? इस सूची के अनुसार, यह सिर्फ है image/png। iana.org/assignments/media-types/media-types.xhtml

— माइक्रोस

6

वह चयनित उत्तर होना चाहिए! इसमें सिर्फ एक नोट की कमी है जो आपको अभी भी सर्वर-साइड (गैर-सहायक ब्राउज़र के कारण, लेकिन सुरक्षा के लिए भी) की जांच करने की आवश्यकता है

— Erdal G.

1

जब यह जवाब था तो संभवत: यह काम करता है, लेकिन बस इसे आज़माया और एफएफ के लिए काम नहीं किया। मुझे सिर्फ स्वीकार = "जोड़ने की जरूरत है। png, .jpg, .jpeg" जैसे: jsfiddle.net/DiegoTc/qjsv8ay9/4

— डिएगो

1

इस पर पूरी तरह से भरोसा मत करो। यह अन्य फ़ाइलों को भी आसानी से स्वीकार कर सकता है। आपको बस खुली फ़ाइल विंडो में दी गई फ़ाइल के प्रकार को बदलने की आवश्यकता है।

163

इसका उपयोग करना:

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

एफएफ और क्रोम दोनों में काम करता है।

— Tyilo
स्रोत

14

स्वीकार विशेषता एक मान्यता उपकरण नहीं है, सभी अपलोड सर्वर पर हमेशा मान्य होने चाहिए ...

— TlonXP

1

अभी भी देशी एंड्रॉइड ब्राउज़र में समर्थित नहीं है, लेकिन दूसरों पर अच्छी तरह से काम करता है मुझे लगता है कि मैं caniuse.com/#feat=input-file-accept

— mcy

मुझे यह समाधान पसंद है क्योंकि फ़ाइल में प्रकार ड्रॉपडाउन "छवि फ़ाइलें" दिखाता है।

— hardsetting

इससे सावधान रहें, क्योंकि यह एसवीजी की अनुमति देता है, जो आप नहीं चाहते हैं।

— Stephenmurdoch

यह अधिकतम छवि फ़ाइलों .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw की अनुमति देगा। इसलिए विशेष रूप से प्रकार का उल्लेख करना बेहतर है।

— थामराई टी

76

इसे इस तरह इस्तेमाल करें

<input type="file" accept=".png, .jpg, .jpeg" />

इसने मेरे लिए काम किया

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— एर। मोहित अग्रवाल
स्रोत

यह iOS 12 के लिए काम नहीं करता है। उपयोगकर्ता अभी भी डिवाइस में वीडियो चुन सकता है।

— user3160227

28

चरण:
1. इनपुट टैग के लिए स्वीकार विशेषता जोड़ें
2. जावास्क्रिप्ट के साथ मान्य
3. सामग्री वास्तव में एक अपेक्षित फ़ाइल प्रकार है, तो यह सत्यापित करने के लिए सर्वर साइड सत्यापन जोड़ें

HTML और जावास्क्रिप्ट के लिए:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

स्पष्टीकरण:

एक्सेप्ट एट्रिब्यूट उन फाइलों को फिल्टर करता है जो फाइल चॉपर पॉपअप में प्रदर्शित होंगी। हालाँकि, यह एक मान्यता नहीं है। यह केवल ब्राउज़र के लिए एक संकेत है। उपयोगकर्ता अभी भी पॉपअप में विकल्प बदल सकता है।
जावास्क्रिप्ट केवल फ़ाइल एक्सटेंशन के लिए मान्य है, लेकिन वास्तव में सत्यापित नहीं कर सकता है कि चयन फ़ाइल एक वास्तविक jpg या png है।
तो आपको सर्वर साइड पर फ़ाइल सामग्री सत्यापन के लिए लिखना होगा।

— सूर्य कामेश्वर राव रवि
स्रोत

1

सबसे पूर्ण उत्तर

— पैरानॉयडहोमिड

27

इससे हासिल किया जा सकता है

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

लेकिन यह एक अच्छा तरीका नहीं है। आपको फ़ाइल की छवि की जांच करने के लिए सर्वर की तरफ कोड करना होगा या नहीं।

जाँच करें कि क्या छवि फ़ाइल एक वास्तविक छवि या नकली छवि है

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

अधिक संदर्भ के लिए, यहां देखें

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— अशोक देवतवाल
स्रोत

5

आप इस डॉक्स acceptको <input type="file">पढ़ने के लिए विशेषता का उपयोग कर सकते हैं http://www.w3schools.com/tags/att_input_accept.asp

— yussan
स्रोत

3

प्रकार = "फ़ाइल" का उपयोग करना और स्वीकार करना = "छवि / *" (या आप जो प्रारूप चाहते हैं), उपयोगकर्ता को विशिष्ट प्रारूप वाली फ़ाइल चुनने की अनुमति दें। लेकिन आपको इसे क्लाइंट पक्ष में फिर से जांचना होगा, क्योंकि उपयोगकर्ता अन्य प्रकार की फ़ाइलों का चयन कर सकता है। यह मेरे लिए काम करता है।

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

और फिर, आपकी जावास्क्रिप्ट स्क्रिप्ट में

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— माटी कासनेली
स्रोत

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

— एडम मार्शल

मुझे तुम्हारा विचार आता है। क्या यह एक वैध जेएस सिंटैक्स है const file: File = imageInput.files[0];:? इसके अलावा, आईडी को इनपुट करने का काम पारंपरिक तरीके से नहीं किया जाता है।

— इवान पी।

वास्तव में, जेएस नहीं है, यह टाइपस्क्रिप्ट है। ब्लॉक कोड को एक कोणीय परियोजना से कॉपी किया गया था। : (फ़ाइल) यदि आप एक जावास्क्रिप्ट फ़ाइल में इसका उपयोग करना चाहते हैं, तो आप प्रकार परिभाषा को छोड़ देते हैं करने के लिए है

— माटी Cassanelli

0

यदि आप एक बार में कई चित्र अपलोड करना चाहते हैं, तो आप multipleइनपुट में विशेषता जोड़ सकते हैं ।

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

स्निपेट का विस्तार करें

— JerryGoyal
स्रोत