<इनपुट प्रकार = "फ़ाइल"> का उपयोग करते समय फ़ाइल प्रारूप को सीमित करें?

Question

जब उपयोगकर्ता <input type="file">HTML में तत्व में ब्राउज़ बटन पर क्लिक करता है, तो मैं उस प्रकार के फ़ाइल को प्रतिबंधित करना चाहता हूं, जिसे मूल OS फ़ाइल चयनकर्ता से चुना जा सकता है । मैं एक महसूस कर रही है यह असंभव है, लेकिन मैं अगर वहाँ जानना चाहते हैं है एक समाधान। मैं केवल HTML और जावास्क्रिप्ट पर रखना चाहूंगा; नो फ्लैश प्लीज।

Comments

यह आसानी से PHP के साथ संभव है, लेकिन मुझे नहीं पता कि क्या आप इसका उपयोग कर सकते हैं, इसलिए मैं कोड पोस्ट नहीं करूंगा।

— लटॉक्स

मैं कर सकता हूं, लेकिन मेरे पास जावास्क्रिप्ट के साथ काम करने का एक समाधान है - यह एक फाइल को अपलोड करने की झुंझलाहट को दूर करता है और फिर "गलत फाइल!" त्रुटि।

— बोजैंगल्स

इसके अलावा अधिक हाल के प्रश्न देखें: stackoverflow.com/questions/181214/…

— क्रिस्टोफ़ रूसो सेप

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

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

Answer 1

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

लेकिन फिर भी, ओएस की फ़ाइल चयन संवाद बॉक्स में एक फ़िल्टर प्रदान करने में मदद की स्वीकार विशेषता हो <input type = "file">सकती है। उदाहरण के लिए,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

.xls या .xlsx के अलावा अन्य फ़ाइलों को फ़िल्टर करने का एक तरीका प्रदान करना चाहिए। यद्यपि तत्व के लिए एमडीएन पृष्ठ inputने हमेशा कहा कि यह मेरे आश्चर्य का समर्थन करता है, यह संस्करण 42 तक फ़ायरफ़ॉक्स में मेरे लिए काम नहीं करता था। यह IE 10+, एज और क्रोम में काम करता है।

इसलिए, IE 10+, एज, क्रोम, और ओपेरा के साथ 42 वर्ष से अधिक पुराने फ़ायरफ़ॉक्स का समर्थन करने के लिए, मुझे लगता है कि कॉमा से अलग होने वाली सूची का उपयोग करना बेहतर है:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[ एज (EdgeHTML) व्यवहार: फ़ाइल प्रकार फ़िल्टर ड्रॉपडाउन यहाँ उल्लिखित फ़ाइल प्रकार दिखाता है, लेकिन ड्रॉपडाउन में डिफ़ॉल्ट नहीं है। डिफ़ॉल्ट फ़िल्टर है All files (*)]

आप MIME- प्रकारों में तारांकन का भी उपयोग कर सकते हैं। उदाहरण के लिए:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C, MIME- प्रकार और विशेषता में एक्सटेंशन दोनों को निर्दिष्ट करने के लिए लेखकों की सिफारिश करता acceptहै। तो, सबसे अच्छा तरीका है:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

उसी की JSFiddle: यहाँ ।

संदर्भ: माइम-प्रकारों की सूची

महत्वपूर्ण:accept विशेषता का उपयोग करना केवल उन प्रकारों की फ़ाइलों में फ़िल्टरिंग का एक तरीका प्रदान करता है जो ब्याज के हैं। ब्राउज़र अभी भी उपयोगकर्ताओं को किसी भी प्रकार की फ़ाइलों को चुनने की अनुमति देता है। अतिरिक्त (क्लाइंट-साइड) चेकों से किया जाना चाहिए (जावास्क्रिप्ट का उपयोग करते हुए, एक तरीका होगा इस ), और निश्चित रूप से फ़ाइल प्रकारों सर्वर पर सत्यापित किया जाना चाहिए , दोनों फाइल एक्सटेंशन और उसके द्विआधारी हस्ताक्षर का उपयोग कर माइम प्रकार के संयोजन का उपयोग ( एएसपी .NET , PHP , रूबी , जावा )। आपफ़ाइल प्रकारों और उनकी जादुई संख्या के लिए इन तालिकाओं को संदर्भित करना चाह सकते हैं, अधिक मजबूत सर्वर-साइड सत्यापन करने के लिए।

यहाँ फ़ाइल-अपलोड और सुरक्षा पर तीन अच्छे पढ़े गए हैं।

EDIT: हो सकता है कि फ़ाइल प्रकार का सत्यापन बाइनरी सिग्नेचर का उपयोग करके क्लाइंट भी जावास्क्रिप्ट (एचटीएमएल 5 फाइल एपीआई) का उपयोग करके जावास्क्रिप्ट के बजाय (एक्सटेंशन को देख कर) कर सकता है, लेकिन फिर भी, फ़ाइल को सर्वर पर सत्यापित किया जाना चाहिए, क्योंकि एक दुर्भावनापूर्ण उपयोगकर्ता अभी भी एक कस्टम HTTP अनुरोध बनाकर फ़ाइलें अपलोड करने में सक्षम होंगे।

Comments

@ सैंडसीयर मुझे नहीं लगता कि आप HTML में फ़ाइल साइज़ को प्रतिबंधित कर सकते हैं। जैसा कि आपने सुझाया है, जावास्क्रिप्ट का उपयोग करना संभव है।

— सचिन जोसफ

मेरे व्यक्तिगत अनुभव से यह एक अच्छा जवाब लगता है, अकेले माइम प्रकार सभी ब्राउज़रों पर काम नहीं करेगा।

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

संयोग से acceptअभी भी एज में काम नहीं करता है: stackoverflow.com/questions/31875617/… । यहाँ अधिक जानकारी: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— SharpC

काश, हमारे पास भी उदाहरण के लिए फ़ाइलों को बाहर करने का विकल्प होता exclude="exe"। ¯_ (¯) _ / ¯

— सागिव बीजी

एज व्यवहार को और स्पष्ट करने के लिए (मेरे परीक्षणों के अनुसार), यह आपके द्वारा निर्दिष्ट के आधार पर अलग-अलग फ़िल्टर जोड़ेगा, लेकिन a) यह बंडल नहीं है, इसलिए यह प्रत्येक एक्सटेंशन को एक अलग विकल्प के रूप में सूचीबद्ध करेगा और b) यह हमेशा कुछ में जोड़ देगा- पहले से बताए गए .html और c) जैसे एक्सटेंशन का निर्माण करें, यह हमेशा पूर्व-चयन (*) होगा। जो इसे ज्यादातर मामलों में एक बड़ी गड़बड़ी और बेकार बनाता है। मैंने uservoice लिंक पर मतदान किया, चलो आशा करते हैं कि वे जल्द या बाद में सुनें।

— आर्य

Answer 2

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

उदाहरण के लिए:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

HTML5 कल्पना में अधिक पढ़ें

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

तो जवाब है: कोई आप को सीमित नहीं कर सकते , लेकिन आप कर सकते हैं एक पूर्व चयन सेट, लेकिन आप नहीं कर सकते हैं उस पर भरोसा करते हैं।

वैकल्पिक रूप से या इसके अतिरिक्त आप जावास्क्रिप्ट के साथ फ़ाइल नाम (इनपुट फ़ील्ड का मान) की जाँच करके कुछ ऐसा ही कर सकते हैं, लेकिन यह बकवास है क्योंकि यह कोई सुरक्षा प्रदान नहीं करता है और उपयोगकर्ता के लिए चयन को भी आसान नहीं बनाता है। यह संभावित रूप से एक वेबमास्टर को केवल यह सोचकर चकमा देता है कि वह सुरक्षित है और सुरक्षा छेद खोलता है। यह उन उपयोगकर्ताओं के लिए गधे में दर्द हो सकता है जिनके पास वैकल्पिक फ़ाइल एक्सटेंशन (उदाहरण के लिए jpg के बजाय jpeg), अपरकेस या कोई फ़ाइल एक्सटेंशन नहीं है (जो कि लिनक्स सिस्टम पर आम है)।

Comments

अतिरिक्त जानकारी के लिए stackoverflow.com/questions/181214/…

— मार्टिन मेसेर

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

— theCuBeMan

Answer 3

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

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Comments

@ जो, यह एक उदाहरण है ... यह आप जो भी एक्सटेंशन की अनुमति देना चाहते हैं उसका विस्तार कर सकते हैं।

— गैब्रियल पेट्रीओली

हां तुम कर सकते हो। लेकिन तुम नहीं थे! और माबी किसी ने इसे पहले ही कॉपी कर लिया है! और सही माइम प्रकार के साथ फ़ाइलों के बारे में क्या है लेकिन कोई विस्तार नहीं?

— 22

@ जो .. अच्छी तरह से .. मैं दिशा और एक ध्वनि तर्क प्रदान करने की कोशिश करता हूं। हर मामले के लिए पूरी तरह से लागू समाधान नहीं। मुझे विश्वास है कि दर्शक वेब से कॉपी / पेस्ट करते समय सामान्य ज्ञान का उपयोग करते हैं;)

— गेब्रियल पेट्रीओली

कैसे "Some.File.jpg" के बारे में? शायद उस रेगेक्स लाइन को पढ़ने की जरूरत है: var ext = this.value.match (/ \। ([^।] +) $ /) [1];

— जॉन क्लोस्के

इस दृष्टिकोण के साथ मुद्दा यह है कि कुछ अभी भी तकनीकी रूप से एक jpeg हो सकता है, भले ही वह उस विस्तार के साथ समाप्त न हो। एक्सटेंशन! == माइम प्रकार

— मैट फ्लेचर

Answer 4

हाँ आप सही है। यह HTML के साथ असंभव है। उपयोगकर्ता जो चाहे वह / वह जो चाहे फ़ाइल चुन सकेगा।

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

कुछ इस तरह:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML कोड:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Comments

इसके लिए पूरी तरह से मान्य HTML विशेषता है, इसलिए यह संभव है। यह केवल ब्राउज़रों द्वारा सम्मानित नहीं है, लेकिन एक मानकीकरण समस्या है। साथ ही असुरक्षित मार्कअप में किसी भी सामान को संभाला ग्राहक कुछ भी सीमित नहीं कर सकता है जावा स्क्रिप्ट कोई समाधान नहीं है।

— द ड्यूरेशन

बहुत अच्छी बात है। मैं मामले में सिर्फ एक दूसरा PHP चेकर जोड़ूंगा। बहुत सावधान नहीं हो सकता!

— बोजैंगल्स

ठीक है, यह कोई नुकसान नहीं है अगर मैं एक PHP सत्यापन स्क्रिप्ट का उपयोग कर रहा हूं, तो मैं दोनों का उपयोग करूंगा।

— Bojangles 21

@ जो: यह कहना बंद करो कि मेरा जवाब बेकार है! :-) वैसे भी, यह एक सही समाधान नहीं है। जैसा कि मैंने शुरुआत में कहा था: "यह असंभव है" जो ओपी चाहता है। लेकिन आप उपयोगकर्ता के लिए कुछ हद तक मदद कर सकते हैं यदि आप केवल उसे कुछ एक्सटेंशन के साथ फाइल चुनने दें। वास्तविक फ़ाइल प्रकार सत्यापन सर्वर साइड किया जाना चाहिए ।

— पाब्लो सांता क्रूज़

@JoeHopfgartner: यार, तुम यहाँ पाब्लो के लिए अत्यधिक कठोर हो रहे हो। क्लाइंटसाइड सत्यापन स्थानों के टन में किया जाता है और यद्यपि फुलप्रूफ नहीं है ([ख] हमेशा [/ b] सर्वराइड सत्यापन शामिल होना चाहिए) यह उपयोगकर्ता को काफी समय बचा सकता है (बेवकूफ एक्सटेंशन चेक आदि के लिए कोई पोस्टबैक नहीं)। हालांकि पाब्लो द्वारा दी गई पटकथा परिपूर्ण नहीं है, लेकिन इसका केवल एक उदाहरण है कि इस मुद्दे से कैसे निपटा जाए ... उदाहरण के लिए, आपको Microsoft के तकनीकी लोगों को ईमेल करना चाहिए और उन्हें अपने ASP.NET सत्यापनकर्ताओं से क्लाइंटसाइड सत्यापन हटाने के लिए कहना चाहिए। यह आप के लिए सभी सादे बकवास है ...

— नाथन

Answer 5

तकनीकी रूप से आप तत्व पर एचटीएमएल 5 में acceptविशेषता को निर्दिष्ट कर सकते हैं , लेकिन यह ठीक से समर्थित नहीं है।input

Comments

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

— बोजैंगल्स

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

— साइमन ईस्ट

Answer 6

विशेषता के inputसाथ टैग का उपयोग करेंaccept

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

नवीनतम ब्राउज़र संगतता तालिका के लिए यहां क्लिक करें

लाइव डेमो यहां

केवल छवि फ़ाइलों का चयन करने के लिए, आप इसका उपयोग कर सकते हैं accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

यहां लाइव डेमो

केवल gif, jpg और png दिखाया जाएगा, क्रोम वर्जन 44 से स्क्रीन ग्रैब

Comments

धन्यवाद! Win10 पर क्रोम में, अगर मैं उपयोग करता हूं, तो accept="image/*"यह फाइल पिकर में "कस्टम फाइल" के बजाय "इमेज फाइल्स" कहता है, जो अंतिम उपयोगकर्ता के लिए अच्छा है।

— टेडी

लेकिन उपयोगकर्ता इसे बदल सकते हैं और अन्य एक्सटेंशन फ़ाइल

— प्रशांत प्रजापति

@PrashantPrajapati हाँ, ब्राउज़र कैसे बनाये जाते हैं, सर्वर में संबंधित मान्यता होनी चाहिए। बेहतर उपयोगकर्ता अनुभव के लिए ब्रोसर कार्यक्षमता बस है।

— किरनवज

Answer 7

मुझे पता है कि यह थोड़ी देर है।

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Answer 8

आप वास्तव में इसे जावास्क्रिप्ट के साथ कर सकते हैं, लेकिन याद रखें कि js क्लाइंट साइड है, इसलिए आप वास्तव में "चेतावनी देने वाले उपयोगकर्ता" होंगे कि वे किस प्रकार की फाइलें अपलोड कर सकते हैं, यदि आप AVOID को प्रतिबंधित करना चाहते हैं (जैसा कि आपने कहा तो सीमित या सीमित करें) कुछ प्रकार की फाइलें जो आप चाहते हैं। यह सर्वर साइड करें।

देखो इस बुनियादी टुट यदि आप सर्वर साइड सत्यापन के साथ आरंभ करना चाहते हैं। पूरे ट्यूटोरियल के लिए इस पृष्ठ पर जाएँ ।

सौभाग्य!

Answer 9

जैसा कि पिछले उत्तरों में बताया गया है कि हम केवल दिए गए फ़ाइल स्वरूपों के लिए फ़ाइलों का चयन करने के लिए उपयोगकर्ता को प्रतिबंधित नहीं कर सकते हैं। लेकिन HTML में फ़ाइल विशेषता पर स्वीकृत टैग का उपयोग करना वास्तव में आसान है।

सत्यापन के लिए, हमें इसे सर्वर साइड पर करना होगा। हम इसे js में क्लाइंट की तरफ से भी कर सकते हैं, लेकिन इसका समाधान नहीं है। हमें सर्वर साइड पर मान्य होना चाहिए।

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

Answer 10

मैं निम्नलिखित सुझाव दे सकता हूं:

• यदि आपको उपयोगकर्ता को डिफ़ॉल्ट रूप से किसी भी छवि फ़ाइलों का चयन करना है, तो उपयोग स्वीकार करें = "छवि / *"

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

• यदि आप विशिष्ट छवि प्रकारों पर प्रतिबंध लगाना चाहते हैं तो स्वीकार = "छवि / bmp, छवि / jpeg, छवि / png" का उपयोग करें

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• यदि आप विशिष्ट प्रकारों पर प्रतिबंध लगाना चाहते हैं तो स्वीकार = "। bmp, .doc, .pdf" का उपयोग करें।

  <input type="file" accept=".bmp, .doc, .pdf" />

• आप फ़ाइल फ़ाइलर को सभी फ़ाइलों में बदलने के लिए उपयोगकर्ता को प्रतिबंधित नहीं कर सकते, इसलिए हमेशा स्क्रिप्ट और सर्वर में फ़ाइल प्रकार को मान्य करें

Comments

यह वही था जो मैं देख रहा था: स्वीकार = "। bmp" क्रोम पर ठीक काम करता है।

— माइकलरोम