HTML: फ़ाइल अपलोड को केवल छवियों के लिए कैसे सीमित करें?

Question

HTML के साथ, मैं किस प्रकार की फ़िल्टिप्स को अपलोड कर सकता हूं, इसे कैसे सीमित करूं?

उपयोगकर्ता के अनुभव को आसान बनाने के लिए, मैं फ़ाइल अपलोड को केवल छवियों (jpeg, gif, png) होने के लिए सीमित करना चाहता हूं।

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Comments

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

— याकूब

मुझे नहीं पता कि आप एक फ़ाइल मास्क सेट कर सकते हैं। मैंने कभी इसे सफलतापूर्वक नहीं देखा।

— रॉबर्ट के

Answer 1

एचटीएमएल 5 कहता है <input type="file" accept="image/*">। बेशक, कभी भी क्लाइंट-साइड सत्यापन पर भरोसा न करें: हमेशा सर्वर-साइड पर फिर से जांच करें ...

Answer 2

HTML5 फ़ाइल इनपुट में विशेषता और भी कई विशेषता है। कई विशेषता का उपयोग करके आप एक उदाहरण में कई चित्र अपलोड कर सकते हैं।

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

आप कई माइम प्रकार भी सीमित कर सकते हैं।

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

और फ़ाइल ऑब्जेक्ट का उपयोग करके माइम प्रकार की जांच का दूसरा तरीका।

फ़ाइल ऑब्जेक्ट आपको नाम, आकार और प्रकार देता है।

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

आप उपरोक्त कोड द्वारा कुछ फ़ाइल प्रकारों के लिए उपयोगकर्ता को प्रतिबंधित भी कर सकते हैं।

Comments

image/*|audio/*|video/*मेरे लिए काम नहीं करता है, यह अल्पविराम से अलग होना चाहिए ऐसा लगता है:image/*,video/mp4,.txt

— सर्ग

MimeType की जाँच के लिए बढ़िया है! टीएक्स!

— पेड्रो फेरेरा

Answer 3

संपादित

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

http://www.webmasterworld.com/forum21/6310.htm

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

निम्नलिखित पुरानी पोस्ट में कुछ जानकारी है जो आपको विकल्पों के साथ मदद कर सकती है।

फ़ाइल इनपुट 'स्वीकार' विशेषता - क्या यह उपयोगी है?

Answer 4

यहाँ इमेज अपलोड के लिए HTML है। डिफ़ॉल्ट रूप से यह केवल ब्राउज़िंग विंडो में छवि फ़ाइलों को दिखाएगा क्योंकि हमने डाल दिया है accept="image/*"। लेकिन हम अभी भी इसे ड्रॉपडाउन से बदल सकते हैं और यह सभी फाइलों को दिखाएगा। तो जावास्क्रिप्ट हिस्सा सत्यापित करता है कि चयनित फ़ाइल एक वास्तविक छवि है या नहीं।

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

यहां परिवर्तन की घटना पर हम पहले छवि के आकार की जांच करते हैं। और दूसरी ifस्थिति में हम जांचते हैं कि यह एक इमेज फाइल है या नहीं।

this.files[0].type.indexOf("image")होगा -1यदि यह एक छवि फ़ाइल नहीं है।

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Comments

कृपया स्पष्टीकरण जोड़ें।

— पॉल स्वेट्ज़

कृपया ध्यान दें कि उपरोक्त के लिए jquery की आवश्यकता है, लेकिन ऐसा नहीं कहते हैं। यह पता लगाने के लिए पर्याप्त आसान है, लेकिन राज्य के लिए उपयोगी है। मैंने इसके लिए एक फील बनाया । यह कुछ अन्य चीजें करता है (जैसा कि एक परियोजना के लिए आवश्यक है), लेकिन अवधारणा बहुत अधिक है।

— डेव लैंड

Answer 5

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

अब html भाग में

<input type="file" onchange="chng()">

यह कोड यह जांच करेगा कि अपलोड की गई फ़ाइल jpg फ़ाइल है या नहीं और अन्य प्रकार के अपलोड को प्रतिबंधित करता है या नहीं

Comments

यह चेक फ़ाइल एक्सटेंशन के सरल नामकरण से पराजित होता है। यदि आप कुछ ऐसा करने जा रहे हैं, तो आपको कम से कम डेटा यूआरआई प्रकार की जांच करनी चाहिए।

— लुकास लेब्लांक

Answer 6

आप इसे केवल सर्वर-साइड पर सुरक्षित रूप से कर सकते हैं। "स्वीकार करें" विशेषता का उपयोग करना अच्छा है, लेकिन सर्वर साइड पर भी मान्य होना चाहिए, ऐसा न हो कि उपयोगकर्ता आपकी लिपि को बिना किसी सीमा के CURL कर सकें।

मेरा सुझाव है कि आप: किसी भी गैर-छवि फ़ाइल को त्याग दें, उपयोगकर्ता को चेतावनी दें, और फ़ॉर्म को फिर से दिखाएं।

Answer 7

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

आपका सबसे अच्छा शर्त यह है कि सर्वर पर बैक एंड में किसी प्रकार का फ़िल्टर करना है।

Answer 8

Uploadify नामक प्रोजेक्ट को चेकआउट करें। http://www.uploadify.com/

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

Comments

फ्लैश! ... कोई रास्ता नहीं!

— एरिकबेस्ट

सबसे खराब समाधान।

— मट्टियो मोस्कोनी 20

दोस्तों, मैं नहीं देखता कि यह अब तक का सबसे खराब समाधान क्यों है। हालाँकि यह सच है कि फ्लैश गायब होने वाला है, यह अभी भी पुराने ब्राउज़रों द्वारा उपयोग किया जा रहा है - बहुत पुराना, ठीक है, लेकिन फिर भी इसका उपयोग किया जा रहा है - और इस समाधान में दोनों प्रकार की प्रौद्योगिकियां हैं: jQuery + HTML5 और फ्लैश बैकबैक। यह उतना ही अच्छा है जितना वीडियोजेएस, जिसमें फ्लैश फ्लैशबैक होता है अगर ब्राउज़र वीडियो नहीं चला सकता है ... मैंने समाधान का परीक्षण नहीं किया है, तो यह सबसे अच्छा नहीं हो सकता है, लेकिन डाउनवोट निष्पक्ष नहीं हैं।

— अनपराड

+1 वोट देने के लिए मूर्खतापूर्ण। फ्लैश दूर जा रहा है, लेकिन अच्छी वापसी है। आपको क्या लगता है कि Google सॉकेट फॉलबैक के लिए जीमेल का उपयोग करता है? बेवकूफ।

— जेसन सेब्रिंग

यह उत्तर 4 साल पुराना है। उस समय, कई फ़ाइल चयनों के लिए HTML5 समर्थन या स्वीकार किए गए प्रकारों द्वारा चयनित फ़ाइल विंडो को फ़िल्टर करना किसी भी प्रमुख ब्राउज़रों में अच्छी तरह से समर्थित नहीं था। यह एक समाधान था जो उस समय कई लोगों के लिए काम करता था, लेकिन मैं अब एक शुद्ध एचटीएमएल 5 समाधान की ओर बढ़ूंगा।

— एंड्रयूआर