<ইনপুট টাইপ = "ফাইল"> ব্যবহার করার সময় ফাইল ফর্ম্যাট সীমাবদ্ধ করবেন?


667

আমি যখন ব্যবহারকারী <input type="file">এইচটিএমএলে উপাদানটিতে ব্রাউজ বোতামটি ক্লিক করেন তখন দেশীয় ওএস ফাইল চয়নকারী থেকে বেছে নেওয়া যায় এমন ফাইলের ধরণটি আমি সীমাবদ্ধ রাখতে চাই । আমি একটা অনুভূতি আছে এটা অসম্ভব, কিন্তু আমি যদি সেখানে জানতে চাই হয় একটি সমাধান। আমি সম্পূর্ণ এইচটিএমএল এবং জাভাস্ক্রিপ্টে রাখতে চাই; কোন ফ্ল্যাশ দয়া করে।


1
এটি পিএইচপি দিয়ে খুব সহজেই সম্ভব, তবে আপনি জানেন না যে আপনি এটি ব্যবহার করতে পারেন তাই আমি কোডটি পোস্ট করব না।
লাটক্স

2
আমি করতে পারি, তবে জাভাস্ক্রিপ্টের সাথে আমার কাজ করার একটি সমাধান রয়েছে - এটি কোনও ফাইল আপলোড করার বিরক্তি দূর করে তারপরে "ভুল ফাইল!" ত্রুটি.
বোজাঙ্গলেস

আরও সাম্প্রতিক প্রশ্নটি দেখুন: স্ট্যাকওভারফ্লো.com
ক্রিস্টোফ রউসি

একটি বিষয় লক্ষণীয় যে এটি বৈধতার জন্য দুর্দান্ত না হলেও ব্যবহারকারী তাদের ব্রাউজ করার সময় গ্রহণযোগ্যতা দৃশ্যমান ফাইলগুলিকে সীমাবদ্ধ করে দেবে (কমপক্ষে কিছু ব্রাউজারে ...)। সুতরাং এটি বৈধতার চেয়ে বেশি একটি ইউআই এরर्गোনমি বৈশিষ্ট্য।
ক্রিস্টোফ রাউসি

উত্তর:


1119

কড়া কথায় বলতে গেলে উত্তরটি নেই । একজন বিকাশকারী কোনও ধরণের বা এক্সটেনশনের ফাইল আপলোড করা থেকে কোনও ব্যবহারকারীকে আটকাতে পারে না

তবে এখনও, এর স্বীকৃতিযুক্ত বৈশিষ্ট্যটি <input type = "file">ওএসের ফাইল নির্বাচন সংলাপ বাক্সে একটি ফিল্টার সরবরাহ করতে সহায়তা করে। উদাহরণ স্বরূপ,

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

.xls বা .xlsx ব্যতীত ফাইলগুলি ফিল্টার করার জন্য একটি উপায় সরবরাহ করা উচিত। যদিও উপাদানটির এমডিএন পৃষ্ঠা inputসর্বদা বলেছিল যে এটি এটি সমর্থন করে, আমার অবাক করে দিয়েছি, এটি ফায়ারফক্সে আমার পক্ষে সংস্করণ 42 না হওয়া পর্যন্ত কাজ করে না। এটি আইই 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" /> 

[ এজ ( এজ এজটিএমটিএল) আচরণ: ফাইল টাইপ ফিল্টার ড্রপডাউন এখানে উল্লিখিত ফাইলের প্রকারগুলি দেখায়, তবে ড্রপডাউনটিতে এটি ডিফল্ট নয়। ডিফল্ট ফিল্টারটি 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 --> 

ডাব্লু 3 সি লেখকদের সুপারিশের ক্ষেত্রে 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" /> 

একই জেএসফিডাল: এখানে

রেফারেন্স: মাইম-টাইমগুলির তালিকা

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

এখানে তিনটি ভাল পাঠ্য রয়েছে।

সম্পাদনা: সম্ভবত বাইনারি স্বাক্ষর ব্যবহার করে ফাইল টাইপ যাচাইকরণটি HTML5 ফাইল এপিআই ব্যবহার করে জাভাস্ক্রিপ্ট ব্যবহার করে (কেবল এক্সটেনশানটি দেখানোর চেয়ে) ক্লায়েন্টের পক্ষেও করা যেতে পারে, তবে এখনও, ফাইলটি অবশ্যই সার্ভারে যাচাই করা উচিত, কারণ দূষিত ব্যবহারকারী তবুও একটি কাস্টম এইচটিটিপি অনুরোধ করে ফাইলগুলি আপলোড করতে সক্ষম হবে।


2
@ সানডেসায়ার আমি ভাবিনা যে আপনি এইচটিএমএল ফাইলের আকার সীমাবদ্ধ করতে পারেন। আপনার পরামর্শ অনুসারে এটি জাভাস্ক্রিপ্ট ব্যবহার করে সম্ভব।
শচীন জোসেফ

1
আমার ব্যক্তিগত অভিজ্ঞতা থেকে এটি একটি উত্তরের উত্তরের মতো দেখায়, মাইম টাইপটি সমস্ত ব্রাউজারে কাজ করবে না।
ক্রিস্টোফ রাউসি

1
ঘটনাক্রমে acceptএখনও প্রান্তে কাজ করে না: stackoverflow.com/questions/31875617/… । এখানে আরো বিস্তারিত: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/...
SharpC

1
আমি আশা করি আমাদের উদাহরণস্বরূপ ফাইলগুলিও বাদ দেওয়া উচিত exclude="exe"। ¯_ (ツ) _ / ¯
সাগিভ বিজি

1
এজ আচরণটি আরও স্পষ্ট করার জন্য (আমার পরীক্ষাগুলি অনুসারে) এটি আপনার নির্দিষ্টকরণের উপর ভিত্তি করে বিভিন্ন ফিল্টার যুক্ত করবে, তবে ক) এটি বান্ডিল নয়, সুতরাং এটি প্রতিটি বিস্তৃতিকে একটি পৃথক বিকল্প হিসাবে তালিকাভুক্ত করবে এবং খ) এটি সর্বদা কিছু ইন- ইতিমধ্যে উল্লিখিত হিসাবে .html, এবং সি) এর মতো এক্সটেনশনগুলি তৈরি করুন, এটি সর্বদা প্রাক-নির্বাচন (*) হবে। এটি বেশিরভাগ ক্ষেত্রে এটি একটি বড় জগাখিচুড়ি এবং অকেজো করে তোলে। আমি ইউজারভয়েস লিঙ্কটিতে ভোট দিয়েছি, আসুন আশা করি তারা তাড়াতাড়ি বা পরে শুনবে।
এরি

198

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

উদাহরণ স্বরূপ:

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

এইচটিএমএল 5 টিপিতে আরও পড়ুন

মনে রাখবেন যে এটি কেবলমাত্র সঠিক ফাইলগুলি খুঁজে পেতে ব্যবহারকারীর "সহায়তা" হিসাবে ব্যবহৃত হয়। প্রতিটি ব্যবহারকারীর যে কোনও অনুরোধ সে আপনার সার্ভারে প্রেরণ করতে পারে। আপনাকে সর্বদা সার্ভার-সাইডের সমস্ত কিছু যাচাই করতে হবে।

তাই এর জবাব হচ্ছে, কোন আপনি সীমিত করতে পারে না , কিন্তু আপনি করতে পারেন একটি প্রি-নির্বাচন হিসাবে নির্দিষ্ট কিন্তু আপনি করতে পারবেন না এটা উপর নির্ভর করে।

বিকল্পভাবে বা অতিরিক্ত হিসাবে আপনি জাভাস্ক্রিপ্টের সাথে ফাইলের নাম (ইনপুট ক্ষেত্রের মান) চেক করে অনুরূপ কিছু করতে পারেন তবে এটি আজেবাজে কথা কারণ এটি কোনও সুরক্ষা সরবরাহ করে না এবং ব্যবহারকারীর জন্য নির্বাচনও সহজ করে না। এটি কেবলমাত্র কোনও ওয়েবমাস্টারকে এই ভাবাতে চালিত করে যে সে সুরক্ষিত এবং সুরক্ষা গর্তটি খোলে। এটি ব্যবহারকারীদের কাছে বিকল্প ফাইল এক্সটেনশন (উদাহরণস্বরূপ jpg এর পরিবর্তে jpeg), বড় হাতের বা কোনও ফাইল এক্সটেনশন (লিনাক্স সিস্টেমে প্রচলিত) হিসাবে ব্যথা হতে পারে।


3
অতিরিক্ত তথ্যের জন্য দেখুন stackoverflow.com/questions/181214/...
মার্টিন Meeser

1
যদিও এটি সত্য যে অবশেষে ব্যবহারকারীকে যে কোনও ধরণের ফাইল নির্বাচন করা থেকে বিরত রাখা অসম্ভব, এই দিনগুলিতে আপনি HTML5 ফাইল এপিআইয়ের সুবিধা নিতে পারবেন এবং নির্বাচিত ফাইলটি আপলোডের জন্য কাজ করতে পারবেন, এটি সনাক্তকরণ সহ সার্ভারে আসলে আপলোড হওয়ার আগেই ing এর ধরণ, আকার এবং আরও অনেক কিছু। একবার চেষ্টা করে দেখো. এটি ব্যবহার করা খুব সহজ, তবুও খুব শক্তিশালী এবং দরকারী।
TheCuBeMan

96

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


11
@ জো, এটি একটি উদাহরণ ... এটি আপনি যে এক্সটেনশানগুলিকে অনুমতি দিতে চান তা বাড়িয়ে দিতে পারে।
গ্যাব্রিয়েল পেট্রিওলি

হ্যাঁ, আপনি পারেন কিন্তু আপনি না! এবং maby কেউ ইতিমধ্যে এটি অনুলিপি করেছেন! এবং সঠিক মাইম টাইপযুক্ত ফাইলগুলি সম্পর্কে তবে কোনও এক্সটেনশন নেই?
হারিকান

49
@ জো .. ভাল .. আমি দিকনির্দেশ এবং একটি যুক্তিযুক্ত যুক্তি দেওয়ার চেষ্টা করি। প্রতিটি ক্ষেত্রে সমাধান সম্পূর্ণরূপে প্রয়োগ করা হয়নি। আমি ওয়েব থেকে কোড অনুলিপি / আটকানোর সময় দর্শকদের সাধারণ জ্ঞান ব্যবহার করতে বিশ্বাস করি;)
গ্যাব্রিয়েল পেট্রোলি

7
কীভাবে "Some.File.jpg"? সম্ভবত সেই রেজেক্স লাইনটি পড়তে হবে: var ext = this.value.match (/ \। ([^।] +) $ /) [1];
জন ক্লসকে

এই পদ্ধতির সাথে ইস্যুটি হ'ল এমন কিছু এখনও প্রযুক্তিগতভাবে জেপেইগ হতে পারে এমনকি যদি এটি এর এক্সটেনশান দিয়ে শেষ না হয়। এক্সটেনশনগুলি! == মাইম প্রকারভেদ
ম্যাট ফ্লেচার

46

হ্যাঁ তুমিই ঠিক. এটি HTML সহ অসম্ভব with ব্যবহারকারী তার / সে যে কোনও ফাইল চয়ন করতে সক্ষম হবে।

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

কিছুটা এইরকম:

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

এইচটিএমএল কোড:

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

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

2
খুব ভাল পয়েন্ট। আমি সেক্ষেত্রে দ্বিতীয় পিএইচপি পরীক্ষক যুক্ত করব। খুব সাবধান হতে পারে না!
বোজ্যাংলেস

2
ঠিক আছে, আমি খুব পিএইচপি বৈধতা স্ক্রিপ্টটি ব্যবহার করলে এটির কোনও ক্ষতি হয় না, তাই আমি উভয়ই ব্যবহার করব।
বোজাঙ্গলেস

17
@ জো: আমার উত্তরটি সফল হয় তা বলা বন্ধ করুন! :-) যাইহোক, এটি একটি নিখুঁত সমাধান নয়। যেমন আমি এর শুরুতে বলেছিলাম: ওপি যা চায় তা করা "অসম্ভব"। তবে আপনি যদি তাকে কেবল কিছু এক্সটেনশানযুক্ত ফাইল বেছে নিতে দেন তবে ব্যবহারকারীর জন্য আপনার কিছুটা সাহায্য থাকতে পারে। প্রকৃত ফাইল টাইপের বৈধতা অবশ্যই সার্ভারের পাশেই করা উচিত ।
পাবলো সান্তা ক্রুজ 21

11
@ জোহফফগার্টনার: ডুড, আপনি এখানে পাব্লোর জন্য অতিরিক্ত কঠোর হচ্ছেন। ক্লায়েন্টাইড বৈধতা অনেকগুলি জায়গায় সম্পন্ন করা হয় এবং এটি নির্বোধ না হলেও (সেখানে [b] সর্বদা [/ b] সার্ভারসাইড বৈধতা অন্তর্ভুক্ত থাকতে হবে) এটি ব্যবহারকারীকে বেশ কিছু সময় বাঁচাতে পারে (বোকা এক্সটেনশন চেক ইত্যাদির জন্য কোনও পোস্টব্যাক নয়)। যদিও পাবলো প্রদত্ত লিপিটি নিখুঁত নয়, কেবল এই সমস্যাটিকে কীভাবে মোকাবেলা করা যায় তার উদাহরণ হিসাবে এটিই করা হয়েছে ... সম্ভবত আপনার মাইক্রোসফ্টে প্রযুক্তিবিদদের ইমেল করা উচিত এবং তাদের এএসপি.এনইটি যাচাইকারীদের থেকে ক্লায়েন্টাইড বৈধতা অপসারণ করতে বলুন এটি আপনার কাছে সমস্ত জঞ্জাল ...
নাথান

18

টেকনিক্যালি আপনি নির্দিষ্ট করতে পারেন acceptঅ্যাট্রিবিউট (ইন বিকল্প HTML5 দিকে) inputউপাদান, কিন্তু এটা সঠিকভাবে সমর্থিত না।


W3Schools ব্রাউজার সমর্থন ব্যর্থ! এটা সত্যিই লজ্জাজনক। এটি একটি সুরক্ষা উদ্বেগ - লোকেরা ক্লায়েন্টের পার্শ্ব কোডটি হ্যাক করতে পারে এবং যা খুশি তাই আপলোড করতে পারে।
বোজাঙ্গলেস

5
সত্য, এটি সুরক্ষার জন্য ব্যবহার না করা সবচেয়ে ভাল তবে এটি সমর্থনকারী ব্রাউজারগুলিতে এটি অবশ্যই ব্যবহারযোগ্যতায় সহায়তা করে। ব্যবহারকারীদের কেবলমাত্র ফাইলগুলি প্রদর্শিত হয় যা সাইটের অনুমতি দেয় (তাদের একই ফোল্ডারে থাকা সমস্ত জাঙ্ক নয়) এবং ত্রুটি দেওয়ার জন্য তাদের পুরো আপলোড প্রক্রিয়াটি অতিক্রম করতে হবে না, তারা সরাসরি জানবে। কোডারদের এটি ব্যবহার করা উচিত
সাইমন ইস্ট

10

বৈশিষ্ট্য 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/*" />

এখানে লাইভ ডেমো

কেবল জিআইএফ, জেপিজি এবং পিএনজি প্রদর্শিত হবে, ক্রোম সংস্করণ 44 থেকে স্ক্রিন দখল কেবল জিআইএফ, জেপিজি এবং পিএনজি প্রদর্শিত হবে, ক্রোম সংস্করণ 44 থেকে স্ক্রিন দখল


ধন্যবাদ! উইন 10 এর ক্রোমে, আমি যদি accept="image/*"এটি ব্যবহার করি তবে এটি ফাইল চয়নকারীতে "কাস্টম ফাইল" এর পরিবর্তে "চিত্র ফাইলগুলি" বলে, যা শেষ ব্যবহারকারীর পক্ষে দুর্দান্ত।
টেডি

তবে ব্যবহারকারীরা এটি পরিবর্তন করতে এবং অন্যান্য এক্সটেনশান ফাইলটি আপলোড করতে পারে
প্রশান্ত প্রজাপতি

@ প্রশান্তপ্রজপতি হ্যাঁ, ব্রাউজারগুলি কীভাবে তৈরি হয় তা ঠিক আছে, সার্ভারে একই বৈধতা থাকা উচিত B ব্রাউজার কার্যকারিতা কেবলমাত্র আরও ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য।
কিরণভজ

9

আমি জানি এই কিছুটা দেরি হয়েছে।

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

5

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

তাকান এই মৌলিক ছি! যদি তোমরা সার্ভার প্রান্তের বৈধতা দিয়ে শুরু করতে চাই। পুরো টিউটোরিয়াল জন্য এই পৃষ্ঠা দেখুন

শুভকামনা!


4

পূর্ববর্তী উত্তরে উল্লিখিত হিসাবে আমরা কেবলমাত্র প্রদত্ত ফাইল ফর্ম্যাটগুলির জন্য ফাইলগুলি নির্বাচন করতে ব্যবহারকারীকে সীমাবদ্ধ করতে পারি না। তবে এইচটিএমএল-তে ফাইল অ্যাট্রিবিউটে গ্রহণযোগ্য ট্যাগটি ব্যবহার করা সত্যই সহজ।

বৈধতা হিসাবে, আমাদের এটি সার্ভার সাইডে করতে হবে। আমরা এটি ক্লায়েন্ট সাইডে জেএসেও করতে পারি তবে এটি কোনও বুদ্ধিমান সমাধান নয়। আমাদের অবশ্যই সার্ভারের পাশ দিয়ে বৈধতা দিতে হবে।

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


3

আমি নিম্নলিখিত পরামর্শ দিতে পারে:

  • যদি আপনাকে ব্যবহারকারীকে ডিফল্টরূপে যেকোন চিত্র ফাইল নির্বাচন করতে হয়, তবে ব্যবহারটি = "চিত্র / *" ব্যবহার করুন

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

  • আপনি যদি নির্দিষ্ট চিত্রের ধরণের সীমাবদ্ধ রাখতে চান তবে গ্রহণ = "চিত্র / বিএমপি, চিত্র / জেপেইগ, চিত্র / পিএনজি" ব্যবহার করুন

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

  • আপনি যদি নির্দিষ্ট ধরণের মধ্যে সীমাবদ্ধ রাখতে চান তবে গ্রহণ = "। বিএমপি, .ডোক, .পিডিএফ" ব্যবহার করুন

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

  • আপনি ব্যবহারকারীকে সমস্ত ফাইলগুলিতে ফাইল ফাইলার পরিবর্তন করতে সীমাবদ্ধ করতে পারবেন না, তাই স্ক্রিপ্ট এবং সার্ভারে সর্বদা ফাইল প্রকারের বৈধতা দিন


1
এটি আমি যা খুঁজছিলাম: গ্রহণ = "। বিএমপি" ক্রোমের উপর সূক্ষ্মভাবে কাজ করে।
মাইকেলরোম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.