html - एचटीएमएल इनपुट="फ़ाइल" विशेषता फ़ाइल प्रकार स्वीकार करें (सीएसवी)





csv file-upload input content-type (9)


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

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

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

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

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

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

<input type="file" accept="application/vnd.ms-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/*" />

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

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

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

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

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

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

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

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

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

ध्यान दें:

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

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

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

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

मैं उम्मीद कर रहा था कि कोई मेरी मदद कर सकता है।

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

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

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

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

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

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

accept = आवेदन / vnd.openxmlformats- officedocument.spreadsheetml.sheet (.XLSX)

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

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

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




रेगेक्स का उपयोग करना तेज होगा

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }



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

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;
}

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




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

<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);" />

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




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

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



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

सीएसवी के लिए कुछ अन्य एमआईएमई-प्रकार अगर सुझाए गए काम नहीं करते हैं:

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

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




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




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

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

मुझे इसके बजाय इसे लिखना पड़ा:

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



jQuery किसी वैध आईडी नाम को संभालता है। आपको बस मेटाएक्टैक्टर्स से बचने की जरूरत है (यानी, डॉट्स, अर्धविराम, स्क्वायर ब्रैकेट ...)। ऐसा कहने की तरह है कि जावास्क्रिप्ट को केवल उद्धरणों के साथ समस्या है क्योंकि आप लिख नहीं सकते हैं

var name = 'O'Hara';

JQuery एपीआई में चयनकर्ता (नीचे नोट देखें)





html csv file-upload input content-type