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




csv file-upload (6)

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

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

<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/


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


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

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

विशेषता स्वीकार करने में कई गुणों के साथ कुछ समस्याएं हैं और इस मामले में सही तरीके से काम नहीं करती हैं।


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

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

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

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

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


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

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

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

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


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

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

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

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






content-type