একেবারে উজ্জ্বল @ ক্লাভিস্কা সমাধানের ভিত্তিতে, যার কাছে সমস্ত creditণ owedণী।
বৈধতা এবং সহায়তা পাঠ্যের সাথে সম্পূর্ণ বৈশিষ্ট্যযুক্ত বুটস্ট্র্যাপ 4 ফাইল ইনপুট।
ইনপুট গোষ্ঠীর উদাহরণের উপর ভিত্তি করে আমাদের কাছে ফাইলের নাম ব্যবহারকারীর কাছে প্রদর্শন করার জন্য একটি ডামি ইনপুট পাঠ্য ক্ষেত্র ব্যবহৃত হয়েছে, যা onchangeইভেন্ট থেকে লেবেল বোতামের পিছনে লুকিয়ে থাকা প্রকৃত ইনপুট ফাইল ক্ষেত্রটিতে পপুলেস হয়। বুটস্ট্র্যাপ 4 বৈধতা অন্তর্ভুক্ত ছাড়াও সমর্থন আমরা ফাইল ডায়লগ খোলার জন্য ইনপুটটিতে যে কোনও জায়গায় ক্লিক করা সম্ভব করে দিয়েছি।
ফাইল ইনপুট তিনটি অবস্থা
তিনটি সম্ভাব্য রাজ্য হ'ল ডামি এইচটিএমএল ইনপুট ট্যাগ অ্যাট্রিবিউট requiredসেটটি সহ-বৈধ, বৈধ এবং অবৈধ ।
ইনপুটটির জন্য এইচটিএমএল মার্কআপ
আমরা কেবলমাত্র 2 টি কাস্টম ক্লাস প্রবর্তন করি input-file-dummyএবং input-file-btnপছন্দসই আচরণটি সঠিকভাবে স্টাইল এবং তারের জন্য করি। বাকি সমস্তগুলি স্ট্যান্ডার্ড বুটস্ট্র্যাপ 4 মার্কআপ।
<div class="input-group">
<input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
<div class="valid-feedback order-last">File is valid</div>
<div class="invalid-feedback order-last">File is required</div>
<label class="input-group-append mb-0">
<span class="btn btn-primary input-file-btn">
Browse… <input type="file" hidden>
</span>
</label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>
জাভাস্ক্রিপ্ট আচরণগত বিধান
আসল উদাহরণ অনুসারে, ডামি ইনপুটটি কেবল পঠন করা দরকার, যাতে কেবলমাত্র ওপেন ফাইল ডায়ালগের মাধ্যমে পরিবর্তিত হতে পারে এমন ইনপুট পরিবর্তন থেকে ব্যবহারকারীকে আটকাতে। দুর্ভাগ্যক্রমে বৈধতা readonlyক্ষেত্রগুলিতে ঘটে না তাই আমরা ফোকাস এবং অস্পষ্টতার উপর ইনপুটটির সম্পাদনাযোগ্যতা টগল করি ( jquery ইভেন্টগুলি onfocusin এবংonfocusout ) এবং নিশ্চিত করুন যে এটি আবার একবার একটি ফাইল নির্বাচন করা হয় validatable হয়ে যায়।
পাঠ্য ক্ষেত্রটিকে ক্লিকযোগ্য করে তোলা ছাড়াও, বোতামটির ক্লিক ইভেন্টটি ট্রিগার করে, ডামি ক্ষেত্রের জনসংখ্যার বাকী কার্যকারিতা @ ক্লেভিস্কা দ্বারা কল্পনা করা হয়েছিল।
$(function () {
$('.input-file-dummy').each(function () {
$($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
$(ev.data.dummy)
.val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
.trigger('focusout');
});
$(this).on('focusin', function () {
$(this).attr('readonly', '');
}).on('focusout', function () {
$(this).removeAttr('readonly');
}).on('click', function () {
$(this).parent().find('.input-file-btn').click();
});
});
});
কাস্টম শৈলী টুইটগুলি
সর্বাধিক গুরুত্বপূর্ণ আমরা readonlyক্ষেত্রটি ধূসর ব্যাকগ্রাউন্ড এবং সাদাদের মধ্যে লাফিয়ে তুলতে চাই না তাই আমরা নিশ্চিত করি যে এটি সাদা থাকে। স্প্যান বোতামটিতে পয়েন্টার কার্সার নেই তবে আমাদের যাইহোক ইনপুটটির জন্য একটি যুক্ত করতে হবে।
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
