এইচটিএমএল ইনপুট = "ফাইল" অ্যাট্রিবিউট ফাইলের ধরণ গ্রহণ করুন (সিএসভি)


501

আমার পৃষ্ঠায় আমার একটি ফাইল আপলোডের বিষয় রয়েছে:

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

আমার ডেস্কটপে নিম্নলিখিত এক্সেল ফাইলগুলির সাথে:

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

আমি ফাইল আপলোড করতে চান শুধুমাত্র দেন .xlsx, .xls, & .csvফাইল।

acceptবৈশিষ্ট্যটি ব্যবহার করে , আমি পেয়েছি যে এই বিষয়বস্তুর ধরণগুলি .xlsx& .xlsএক্সটেনশনের যত্ন নিয়েছে ...

accept= অ্যাপ্লিকেশন / vnd.openxmlformats- officedocament.spreadsheetml.sheet (.XLSX)

accept= অ্যাপ্লিকেশন / vnd.ms-Excel (.XLS)

তবে আমি এক্সেল সিএসভি ফাইলের জন্য সঠিক সামগ্রী সামগ্রীটি খুঁজে পাচ্ছি না! কোন পরামর্শ?

উদাহরণ: http://jsfiddle.net/LzLcZ/


বেশিরভাগ ব্রাউজারগুলি স্বীকৃতিযুক্ত বৈশিষ্ট্যকে সম্মান করে না যেহেতু এটি সংবেদনশীল ফাইলগুলি প্রেরণের দিকে মনোযোগ দিচ্ছে না এমন ব্যবহারকারীদের উত্সাহিত করতে ব্যবহার করা যেতে পারে।
tletnes

9
@ বিঘ্ন সত্য নয়, এটি বেশিরভাগ প্রধান ব্রাউজারগুলি দ্বারা সমর্থিত
ডম

আপনি যদি (t .trim (# ('# অরিজিনাল ফাইলনেম'))। ভাল ())! = "") {Var ext = $ ('# অরিজিনাল ফাইলনেম')। ভাল ()। বিভক্ত ('।') এটিকেও চেষ্টা করে দেখতে পারেন .pop () toLowerCase ()। যদি (in .inআররে (এক্সট্রা, ['ডক', 'ডকক্স', 'পিডিএফ', 'এক্সএলএসএক্স', 'এক্সএলএস']) == -1) {$ ('# অরিজিনালফাইনেমভালিড')। এইচটিএমএল ('ডক ব্যবহার করুন। ডক , .docx, .pdf ফাইল '); }}
নিতিন পল

অন্য কোনও উবুন্টু ব্যবহারকারী যদি এতে বিভ্রান্ত হয়ে পড়ে থাকেন তবে আমি দেখতে পেয়েছি যে উবুন্টুতে, ফায়ারফক্স "সমস্ত ফাইল" দেখানোর চেয়ে পূর্বনির্ধারিত হয়েছে, তবে ফাইল নির্বাচনের কথোপকথনের ফাইল টাইপ ড্রপডাউনটিতে আপনার "স্বীকৃতি" বৈশিষ্ট্যটি যা-ই যুক্ত করেছে adds
mltsy

উত্তর:


1246

আচ্ছা এটি বিব্রতকর ... আমি যে সমাধানটি সন্ধান করছি তা পেয়েছি এবং এটি সহজতর হতে পারে না। পছন্দসই ফলাফল পেতে আমি নিম্নলিখিত কোডটি ব্যবহার করেছি। আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করবে। সাহায্যের জন্য সবাইকে ধন্যবাদ।

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

বৈধ গ্রহণের প্রকার:

জন্য CSV তে ফাইল (.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/


বিঃদ্রঃ:

আপনি যদি এক্সেল সিএসভি ফাইলগুলি প্রদর্শন করার চেষ্টা করছেন ( .csv), ব্যবহার করবেন না :

  • text/csv
  • application/csv
  • text/comma-separated-values( কেবল অপেরাতে কাজ করে )।

আপনি যদি কোনও নির্দিষ্ট ফাইল প্রকার (উদাহরণস্বরূপ, একটি WAVবা PDF) প্রদর্শন করার চেষ্টা করছেন তবে এটি প্রায় সর্বদা কাজ করবে ...

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

3
দেখে মনে হচ্ছে ক্রোম এই বৈশিষ্ট্যটিকে সমর্থন করে তবে ফায়ারফক্স এখনও এতে কাজ করছে। আপনি এই বাগটি ভোট দিতে পারেন যাতে তারা এটিকে দ্রুত সমাধান করতে পারে: bugzilla.mozilla.org/show_bug.cgi?id=826176
সালভাতোরালব

3
@ ডেভিডআরটেট করুন অ্যাট্রিবিউট কেবল ফাইলের ফিল্টার করবে filter ব্যবহারকারীদের অন্যান্য ফাইলের ধরন নির্বাচন করা থেকে বিরত রাখতে আপনাকে ফাইলের বৈধতাও ব্যবহার করতে হবে। আশা করি এইটি কাজ করবে!
ডোম

1
<ইনপুট টাইপ = "ফাইল" গ্রহণ = "। সিএসভি" /> ফায়ারফক্সে কাজ করে না। ফায়ারফক্সে এটির মতো কাজ করার জন্য অন্য কোনও সমাধান রয়েছে কি?
গণেশ বিজয়কুমার

1
<input type="file" accept=".csv, text/csv" />ম্যাকের জন্য ফায়ারফক্স, ক্রোম এবং অপেরাতে আমার জন্য কাজ করেছেন। শুধুমাত্র .csv সমস্ত ব্রাউজারে কাজ করেনি।
টমাস

1
আপনি কি "এক্সএমএল" ফাইলের জন্য উদাহরণ যুক্ত করতে পারেন? এটা সহায়ক হবে। আগাম ধন্যবাদ.
ni8mr

160

আজকাল আপনি কেবল ফাইল এক্সটেনশন ব্যবহার করতে পারেন can

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

3
বিস্ময়করভাবে এই (এবং বিকল্প যদিও 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

38

ডম এই বৈশিষ্ট্যটি অনেক পুরানো এবং আধুনিক ব্রাউজারগুলিতে আমি যতদূর জানি না, তবে এখানে এর বিকল্প রয়েছে, এটি চেষ্টা করে দেখুন

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

আমার ধারণা এটি অবশ্যই আপনাকে সহায়তা করবে আপনি অবশ্যই আপনার প্রয়োজন অনুসারে এই স্ক্রিপ্টটি পরিবর্তন করতে পারবেন।


5
দুর্দান্ত কাজ কিন্তু আমি বুঝতে পারি না কেন এই জাতীয় বৈশিষ্ট্যটিকে 'পুরাতন' হিসাবে বিবেচনা করা হয়। এটি প্রায় প্রতিটি ওএসের একটি বেসিক ফাইল নির্বাচক বৈশিষ্ট্য, ব্রাউজারগুলি এটিকে কাজ করার জন্য যথাসাধ্য চেষ্টা করা উচিত এবং এটি অনেক ব্যবহারকারীকে সহায়তা করবে ...
ক্রিস্টোফ রাউসি

1
স্বীকৃতি বৈশিষ্ট্যটি পুরানো নয় এবং আইই / এজ ব্যতীত বড় ব্রাউজারগুলিতে সমর্থিত: caniuse.com/#feat=input-file-accept । আপনার উত্তরটি বিপথগামী হওয়ার কারণে দয়া করে তা পুনরায় লিখুন।
থোমাক্স

2
acceptবৈশিষ্ট্যের সবচেয়ে গুরুত্বপূর্ণ দিকটি হ'ল ইঙ্গিতটি এটি ওপেন-ফাইল সংলাপে সরবরাহ করে। ব্যবহারকারীদের ডিফল্টরূপে ফাইলের সাথে ম্যাচিংয়ের সাথে উপস্থাপন করা উচিত, সম্ভবত তারা চাইলে অন্য ধরণের নির্বাচন করার একটি বিকল্প সহ - এখনকার আধুনিক ব্রাউজারগুলি এভাবেই আচরণ করে।
কোডার

13

আমি text/comma-separated-valuesসিএসভি মাইম-টাইপের জন্য স্বীকৃতিযুক্ত বৈশিষ্ট্য ব্যবহার করেছি এবং এটি অপেরাতে দুর্দান্ত কাজ করে। text/csvভাগ্য ছাড়া চেষ্টা করা ।

কিছু অন্যান্য সিএসভি-র জন্য টাইমস টাইপ করুন যদি প্রস্তাবিত কাজ না করে:

  • টেক্সট / কমা-সেপারেটেড-মান
  • টেক্সট / CSV
  • আবেদন / CSV
  • আবেদন / এক্সেল
  • আবেদন / vnd.ms-সীমা অতিক্রম করা
  • আবেদন / vnd.msexcel
  • টেক্সট / anytext

সূত্র: http://filext.com / ফাইল-এক্সটেনশন / সিএসভি


1
হাই ডোম! আমি দুঃখিত বলতে চাই কারণ আপনার উত্তর (ডান হিসাবে চিহ্নিত) ঠিক আছে এবং এর আগে আমার তেমন মনোযোগ নেই কারণ আমি কেবল অপেরাতে সাইটটি পরীক্ষা করেছিলাম। অন্যান্য ব্রাউজারগুলিতে পরীক্ষার পরে, আমি দেখতে পাচ্ছি যে আপনি উত্তরটি আরও সম্পূর্ণ। তবে এটি সমস্ত ব্রাউজারে কাজ করে না। ফায়ারফক্স 17 কীভাবে ফাইল ডায়ালগ ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ) এ ফিল্টার গ্রহণ করে তা সমর্থন করে না , সুতরাং এই সম্পত্তিটি আমার জন্য সাসপেন্সফুল। আমি যাইহোক জাভাস্ক্রিপ্ট ফাইলের বৈধতা ব্যবহার করব, তবে গ্রহণযোগ্য অ্যাট্রে
জয়

11

এটি আমার সাফারি 10 এর অধীনে কাজ করে নি:

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

পরিবর্তে আমাকে এটি লিখতে হয়েছিল:

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

হাই, এটি আমার সাফারিতেও ভাল কাজ করছে। তবে কীভাবে আমরা এক্সেল ডকুমেন্ট গ্রহণ করতে চাই? তোমার কি কোন ক্লু আছে? @trojan
গুস্তাভ

বড় অর্থের উত্তর চেক করুন। TLDR; <ইনপুট টাইপ = "ফাইল" আইডি = "ফাইল নির্বাচন করুন" গ্রহণ = "। xlsx, .xls, .csv" />
স্ক। ইরফান

4

আপনি নিম্নলিখিত ফাইলগুলি দ্বারা কোনও ফাইলের সঠিক কন্টেন্ট-টাইপ জানতে পারবেন:

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

একাধিক বৈশিষ্ট্যের সাথে অ্যাট্রিবিউট গ্রহণের কিছু সমস্যা রয়েছে এবং এই ক্ষেত্রে সঠিকভাবে কাজ করে না।


1

আমি @ যোগীর সমাধানটি পরিবর্তন করেছি। সংযোজনটি হ'ল ফাইলটি যখন ভুল ফর্ম্যাট হয় তখন আমি ইনপুট উপাদানটির মানটি পুনরায় সেট করি।

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

আমার কাস্টম যাচাইকরণ বিল্টইন রয়েছে, কারণ খোলা ফাইল উইন্ডোতে ব্যবহারকারী এখনও "সমস্ত ফাইল ('*')" বিকল্পগুলি বেছে নিতে পারে, নির্বিশেষে যদি আমি ইনপুট উপাদানটিতে স্বীকৃত বৈশিষ্ট্যটি সুস্পষ্টভাবে সেট করি।


0

এখন আপনি নতুন এইচটিএমএল 5 ইনপুট বৈধতা বৈশিষ্ট্যটি ব্যবহার করতে পারেন pattern=".+\.(xlsx|xls|csv)"


10
এমডিএন-এর মতে , 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.
ডম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.