HTML इनपुट = "फ़ाइल" विशेषता फ़ाइल प्रकार स्वीकार करें (CSV)

Question

मेरे पास मेरे पृष्ठ पर फ़ाइल अपलोड ऑब्जेक्ट है:

<input type="file" ID="fileSelect" />

मेरे डेस्कटॉप पर निम्न एक्सेल फ़ाइलों के साथ:

1. file1.xlsx
2. file1.xls
3. file.csv

मैं फाइल अपलोड करना चाहते हैं केवल दिखाने के .xlsx, .xls, और .csvफ़ाइलें।

acceptविशेषता का उपयोग करते हुए , मैंने पाया कि इन सामग्री-प्रकारों ने .xlsx& .xlsएक्सटेंशन का ध्यान रखा ...

accept= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept= आवेदन / vnd.ms-excel (.XLS)

हालाँकि, मुझे Excel CSV फ़ाइल के लिए सही सामग्री-प्रकार नहीं मिल रहा है! कोई सुझाव?

उदाहरण: http://jsfiddle.net/LzLcZ/

Comments

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

— tletnes

@ बटुआ सच नहीं है, यह सबसे प्रमुख ब्राउज़रों द्वारा समर्थित है

— डोम

आप यह भी कोशिश कर सकते हैं अगर ($ .trim ($ ('# OriginalFileName')। val ())! = "") {Var ext = $ ('# OriginalFileName'))। Val () (विभाजन '(')) .pop () toLowerCase ()।; if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid')। html ('Use .doc') , .docx, .pdf फ़ाइलें '); }}

— नितिन पॉल

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

— mltsy

Answer 1

खैर यह शर्मनाक है ... मुझे वह समाधान मिल गया जिसकी मुझे तलाश थी और यह सरल नहीं हो सकता। मैंने वांछित परिणाम प्राप्त करने के लिए निम्नलिखित कोड का उपयोग किया। आशा है कि यह भविष्य में किसी की मदद करेगा। आपकी मदद के लिए सभी को शुक्रिया।

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />  

मान्य स्वीकार प्रकार:

के लिए सीएसवी फ़ाइलें (.csv), उपयोग करें:

<input type="file" accept=".csv" />

के लिए Excel फ़ाइलें 97-2003 (.xls), उपयोग करें:

<input type="file" accept="application/vnd.ms-excel" />

के लिए Excel फ़ाइलें 2007+ (.xlsx), उपयोग करें:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

के लिए पाठ फ़ाइलें (.txt) उपयोग:

<input type="file" accept="text/plain" />

के लिए छवि फ़ाइलें (.png / .jpg / आदि), उपयोग करें:

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

के लिए एचटीएमएल फ़ाइलें (.htm, .html), उपयोग करें:

<input type="file" accept="text/html" />

के लिए वीडियो फ़ाइलें (.avi, .mpg, .mpeg, .mp4), उपयोग करें:

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

के लिए ऑडियो फ़ाइलें (.mp3, .wav, आदि), उपयोग करें:

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

के लिए PDF फ़ाइलों , उपयोग करें:

<input type="file" accept=".pdf" /> 

डेमो:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

---

ध्यान दें:

यदि आप एक्सेल सीएसवी फाइलें ( .csv) प्रदर्शित करने का प्रयास कर रहे हैं , तो उपयोग न करें:

• text/csv
• application/csv
• text/comma-separated-values( ओपेरा में ही काम करता है )।

---

यदि आप एक विशेष फ़ाइल प्रकार (उदाहरण के लिए, WAVया PDF) प्रदर्शित करने की कोशिश कर रहे हैं , तो यह लगभग हमेशा काम करेगा ...

 <input type="file" accept=".FILETYPE" />

Comments

ऐसा लगता है कि क्रोम इस विशेषता का समर्थन करता है, लेकिन फ़ायरफ़ॉक्स अभी भी इस पर काम कर रहा है। आप इस बग को वोट कर सकते हैं ताकि वे इसे तेजी से हल करेंगे: Bugzilla.mozilla.org/show_bug.cgi?id=826176

— साल्वेटेरलैब

@DavidRouten स्वीकार विशेषता केवल फ़ाइल प्रकारों को फ़िल्टर करेगी। उपयोगकर्ताओं को अन्य फ़ाइल प्रकारों का चयन करने से रोकने के लिए आपको फ़ाइल सत्यापन का उपयोग करना होगा। उम्मीद है की वो मदद करदे!

— डोम

<input type = "file" accept = "। csv" /> फ़ायरफ़ॉक्स में काम नहीं करता है। क्या फ़ायरफ़ॉक्स में काम करने के लिए कोई अन्य समाधान है।

— गनेसा विजयकुमार

<input type="file" accept=".csv, text/csv" />मेरे लिए फ़ायरफ़ॉक्स, क्रोम और ओपेरा पर मैक में काम किया। केवल .csv ने सभी ब्राउज़रों में काम नहीं किया।

— tmas

क्या आप "xml" फ़ाइल के लिए एक उदाहरण जोड़ सकते हैं? यह मददगार होगा। अग्रिम में धन्यवाद।

— ni8mr

Answer 2

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

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Comments

हालांकि आश्चर्यजनक रूप से यह (और विकल्प application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel) अभी भी एज 41.16299.820.0 पर काम नहीं करता है stackoverflow.com/questions/31875617/… wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— SharpC

Answer 3

डोम यह विशेषता बहुत पुरानी है और जहां तक ​​मुझे पता है आधुनिक ब्राउज़रों में इसे स्वीकार नहीं किया गया है, लेकिन यहां इसका एक विकल्प है, इसे आज़माएं

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

मुझे लगता है कि यह आपकी मदद करेगा बेशक आप इस स्क्रिप्ट को अपनी आवश्यकताओं के अनुसार बदल सकते हैं।

Comments

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

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

स्वीकार विशेषता पुरानी नहीं है और IE / Edge: caniuse.com/#feat=input-file-accept को छोड़कर प्रमुख ब्राउज़रों में समर्थित है । कृपया अपने उत्तर को फिर से लिखें क्योंकि यह भ्रामक है।

— थोमक्स

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

— कोडर

Answer 4

मैंने text/comma-separated-valuesCSV माइम-प्रकार को स्वीकार विशेषता में उपयोग किया है और यह ओपेरा में ठीक काम करता है। text/csvबिना किस्मत की कोशिश की ।

यदि सुझाव नहीं है तो कुछ अन्य लोग CSV के लिए MIME- प्रकार:

• पाठ / अल्पविराम से अलग मान
• पाठ / सीएसवी
• आवेदन / सीएसवी
• आवेदन / एक्सेल
• आवेदन / vnd.ms-एक्सेल
• आवेदन / vnd.msexcel
• पाठ / anytext

स्रोत: http://filext.com/file-extension/CSV

Comments

हाय डॉम! मैं खेद के साथ कहना चाहता हूं क्योंकि आपका उत्तर (सही के रूप में चिह्नित) ठीक है और मुझे इससे पहले इस पर बहुत ध्यान नहीं है क्योंकि मैं केवल ओपेरा में साइट का परीक्षण कर रहा था। अन्य ब्राउज़रों में परीक्षण करने के बाद, मैं देखता हूं कि आप का उत्तर अधिक पूर्ण है। लेकिन यह सभी ब्राउज़रों में काम नहीं करता है। फ़ायरफ़ॉक्स 17 फ़ाइल डायलॉग ( Bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ) में फ़िल्टर करने के तरीके को स्वीकार करने का समर्थन नहीं करता है , इसलिए यह संपत्ति मेरे लिए संदिग्ध है। मैं वैसे भी जावास्क्रिप्ट फ़ाइल सत्यापन का उपयोग करूंगा, लेकिन टेक्स्ट / सीएसवी का उपयोग

— अटर

Answer 5

यह मेरे लिए सफारी 10 के तहत काम नहीं किया:

<input type="file" accept=".csv" />

मुझे इसके बजाय यह लिखना था:

<input type="file" accept="text/csv" />

Comments

Hii ,,, यह मेरी सफारी पर भी अच्छा काम कर रहा है। लेकिन अगर हम एक्सेल दस्तावेजों को कैसे स्वीकार करना चाहते हैं? क्या आपके पास कोई सुराग है? @ टारजन

— gustav

बिग मनी के जवाब की जाँच करें। TLDR; <input type = "file" ID = "fileSelect" accept = "। xlsx, .xls, .csv" />

— Sk। इरफान

Answer 6

आप केवल निम्न कार्य करके किसी भी फ़ाइल के लिए सही सामग्री-प्रकार जान सकते हैं:

1) इच्छुक फ़ाइल चुनें,

2) और इसे कंसोल में चलाएं:

console.log($('.file-input')[0].files[0].type);

आप एक बार में कई फ़ाइलों के लिए सामग्री-प्रकार की जांच करने के लिए अपने इनपुट के लिए विशेषता "एकाधिक" भी सेट कर सकते हैं और आगे कर सकते हैं:

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

गुण को स्वीकार करने में कई गुण हैं और इस मामले में सही ढंग से काम नहीं करता है।

Answer 7

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

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

मेरे पास कस्टम सत्यापन बिल्डइन है, क्योंकि खुली फ़ाइल विंडो में उपयोगकर्ता अभी भी "ऑल फाइल्स ('*')" विकल्प चुन सकता है, भले ही मैं स्पष्ट रूप से इनपुट तत्व में स्वीकार विशेषता सेट करूँ।

Answer 8

अब आप नए HTML5 इनपुट सत्यापन विशेषता का उपयोग कर सकते हैं pattern=".+\.(xlsx|xls|csv)"।

Comments

एमडीएन के अनुसार , This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.फ़ाइल इनपुट के बारे में, वे कहते हैंfile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

— डॉम