<input type="file" value="Browse" name="avatar" id="id_avatar" />
আমি value
এটিকে সংশোধন করার চেষ্টা করেছি , কিন্তু এটি কাজ করছে না। কীভাবে বোতামের পাঠ্যকে কাস্টমাইজ করবেন?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
আমি value
এটিকে সংশোধন করার চেষ্টা করেছি , কিন্তু এটি কাজ করছে না। কীভাবে বোতামের পাঠ্যকে কাস্টমাইজ করবেন?
উত্তর:
ফর্মের ফাইল ক্ষেত্রগুলিকে স্টাইল করতে ব্যবহৃত বুটস্ট্র্যাপ ফাইলস্টাইল ব্যবহার করুন । এটি টুইটার বুটস্ট্র্যাপ নামে একটি jQuery- ভিত্তিক উপাদান লাইব্রেরির জন্য একটি প্লাগইন
নমুনা ব্যবহার:
অন্তর্ভুক্ত করুন:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
জাভাস্ক্রিপ্ট মাধ্যমে:
$(":file").filestyle();
ডেটা অ্যাট্রিবিউটের মাধ্যমে:
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
পরিবর্তে আপনি একটি চিত্র রাখতে পারেন এবং এটি এর মতো করুন:
এইচটিএমএল:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
jQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
কায়েট : আইই 9 এবং আই 10 তে যদি আপনি জাভাস্ক্রিপ্টের মাধ্যমে কোনও ফাইল ইনপুটটিতে অনক্লিকটি ট্রিগার করেন তবে ফর্মটি 'বিপজ্জনক' হিসাবে চিহ্নিত হবে এবং জাভাস্ক্রিপ্টের সাথে জমা দেওয়া যাবে না, নিশ্চিত নয় এটি itতিহ্যগতভাবে জমা দেওয়া যায় কিনা can
<input type="file"
এসপ নেট গ্রিডভিউ সারিটির অভ্যন্তরে ব্যবহার করছি , যার সারিগুলি গতিশীলভাবে যুক্ত করা যেতে পারে .. সুতরাং কোনও চিত্রে ক্লিক করার সময় প্রাসঙ্গিক ইনপুট ক্লিক ট্রিগার (একই সারিটির) কল করা মাথায় আসল ব্যথা হবে! : /
ফাইল ইনপুট লুকান। একটি ক্লিক ইভেন্ট ক্যাপচার করতে একটি নতুন ইনপুট তৈরি করুন এবং এটি লুকানো ইনপুটটিতে ফরোয়ার্ড করুন:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
;
শেষের দিকে সরিয়ে ফেলতে হয়েছিল ।
"আপলোড ফাইল ..." পাঠ্যটি ব্রাউজারের দ্বারা পূর্বনির্ধারিত এবং পরিবর্তন করা যায় না। এটি ঘুরে দেখার একমাত্র উপায় হ'ল ফ্ল্যাশ- বা জাভা ভিত্তিক আপলোড উপাদান যেমন সুইফআপলোড ব্যবহার করা ।
সমস্ত ব্রাউজারে নিখুঁতভাবে কাজ করে আশা করি এটি আপনার জন্যও কার্যকর হবে।
এইচটিএমএল:
<input type="file" class="custom-file-input">
সিএসএস:
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
content: 'Select some files';
আপনি যে পাঠ্যটি চান তা দিয়ে পরিবর্তন করুন''
যদি ফায়ারফক্সের সাথে কাজ না করে থাকে তবে ইনপুট পরিবর্তে এটি ব্যবহার করুন:
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>
জাতীয়
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
আরও http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
কেবল
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
[স্নিপেট সহ সম্পাদনা করুন]
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
সম্পাদনা করুন : আমি এখন যে মন্তব্যগুলির দ্বারা বোতামের পাঠ্যটি সম্পর্কে জিজ্ঞাসা করছি তা দিয়ে দেখছি, ফাইলের পথটি নয়। আমার খারাপ। আমি যদি নীচে আমার মূল উত্তরটি ছেড়ে দিই তবে এই প্রশ্নে যদি কেউ হোঁচট খায় তবে আমি এটি মূলত যেভাবে ব্যাখ্যা করেছি।
২ য় সম্পাদনা : আমি এই উত্তরটি মুছে ফেলেছিলাম কারণ আমি সিদ্ধান্ত নিয়েছি যে আমি প্রশ্নটি ভুল বুঝি এবং আমার উত্তর প্রাসঙ্গিক নয়। তবে, অন্য উত্তরের মন্তব্যগুলি ইঙ্গিত দেয় যে লোকেরা এখনও এই উত্তর দেখতে চায় তাই আমি এটিকে মুছে ফেলছি।
আমার মূল উত্তর (আমি ভাবলাম যে ওপি বাটনটির পাঠ্য নয়, পথ সম্পর্কে জিজ্ঞাসা করছে):
এটি সুরক্ষার কারণে কোনও সমর্থিত বৈশিষ্ট্য নয় । অপেরা ওয়েব ব্রাউজার এটি সমর্থন করার জন্য ব্যবহৃত তবে এটি সরানো হয়েছিল। এটি সমর্থিত হলে কী সম্ভব হবে তা ভেবে দেখুন; আপনি কোনও ফাইল আপলোড ইনপুট দিয়ে একটি পৃষ্ঠা তৈরি করতে পারেন, কিছু সংবেদনশীল ফাইলের পথে এটি প্রাক-জনসংখ্যা তৈরি করতে পারেন এবং তারপরে onload
ইভেন্টটি দ্বারা চালিত জাভাস্ক্রিপ্ট ব্যবহার করে ফর্মটি স্ব-জমা দিতে পারেন । এটি ব্যবহারকারীদের সম্পর্কে কিছু করার জন্য এটি খুব দ্রুত ঘটবে।
<label>
ক্যাপশন জন্য ব্যবহার করুন<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
<u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
onchange='optionalExtraProcessing(b1.files[0])'
accept='image/png'>
</label>
</form>
এটি কোনও জাভাস্ক্রিপ্ট ছাড়াই কাজ করে । আপনি আপনার হার্টের বিষয়বস্তুতে যে কোনও জটিলতায় ডিগ্রিকে লেবেলটি সাজাতে পারেন। আপনি যখন লেবেলে ক্লিক করেন, ক্লিকটি স্বয়ংক্রিয়ভাবে ফাইল ইনপুটটিতে পুনঃনির্দেশিত হয়। ফাইল ইনপুট নিজেই কোনও পদ্ধতি দ্বারা অদৃশ্য করা যেতে পারে। আপনি যদি লেবেলটি একটি বোতামের মতো প্রদর্শিত হতে চান তবে অনেকগুলি সমাধান রয়েছে, যেমন:
label u {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
কেবল সিএসএস এবং বুটস্ট্র্যাপ শ্রেণি
<div class="col-md-4 input-group">
<input class="form-control" type="text"/>
<div class="input-group-btn">
<label for="files" class="btn btn-default">browse</label>
<input id="files" type="file" class="btn btn-default" style="visibility:hidden;"/>
</div>
</div>
<input type="file">
, একটি চিত্র যুক্ত করুন এবং <input style="position:absolute">
এটির স্থানটি দখল করবে<input type="file">
ফাইলের উপাদানটিতে নিম্নলিখিত সিএসএস ব্যবহার করুন
position:relative;
opacity:0;
z-index:99;
যদি আপনি রেল ব্যবহার করে এবং সমস্যাটি প্রয়োগ করতে সমস্যা হয় তবে আমি @ ফার্নান্দো কোশ পোস্ট করা মূল উত্তর থেকে কিছু টিপস যুক্ত করতে চাই
আপনার application.js খুলুন এবং নীচে এই লাইনটি যুক্ত করুন
// = বুটস্ট্র্যাপ-ফাইলস্টাইল.মিন প্রয়োজন
আপনার কফি খুলুন এবং এই লাইন যুক্ত করুন
$ (": ফাইল")। ফাইলস্টাইল ({বাটননাম: "বিটিএন-প্রাথমিক", বোতামের পূর্বে: সত্য, বোতাম পাঠ: "আপনার পাঠ্য এখানে", আইকন: মিথ্যা});
আপনি কেবল কিছু সিএসএস ট্রিক যুক্ত করতে পারেন। আপনার জাভাস্ক্রিপ্ট বা আরও ইনপুট ফাইলের প্রয়োজন নেই এবং আমি বিদ্যমান মান বৈশিষ্ট্য রাখি । আপনাকে কেবল সিএসএস যুক্ত করতে হবে । আপনি এই সমাধান চেষ্টা করতে পারেন।
.btn-file-upload{
width: 187px;
position:relative;
}
.btn-file-upload:after{
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 48%;
background: #795548;
color: white;
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 2;
}
<input type="file" class="btn-file-upload" value="Uploadfile" />
আমার জন্য এটি বুটস্ট্র্যাপ-ফাইল স্টাইলের সাথে কাস্টম পাঠ্যে কাজ করে না । এটি বোতামের সজ্জাতে সহায়তা করে তবে এর অদ্ভুত পরিবর্তনটি টেক্সট করুন, CSS এর সাথে কুস্তিতে নামার আগে আমি নিম্নলিখিতটি চেষ্টা করি:
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});
বুটস্ট্র্যাপ-ফাইলস্টাইলটি উপাদানটি বোতামটেক্স্ট নামে শ্রেণীর সাথে স্প্যান হিসাবে রেন্ডার করে, তাই যখন ডকুমেন্ট লোডটি কেবল পাঠ্য পরিবর্তন করে। সহজ ডান এবং এটি অবশ্যই সমস্ত ব্রাউজারে কাজ করে।
চিয়ার্স
আমি আমার প্রকল্পের জন্য এটি এটি করেছি:
.btn-outlined.btn-primary {
color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color:#000;
}
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">
এটি একটি বিকল্প সমাধান যা আপনার পক্ষে সহায়ক হতে পারে। এটি ডিফল্টের ব্যাকগ্রাউন্ড-রঙের সাথে মিশ্রণ করে বোতামের বাইরে উপস্থিত পাঠ্যটিকে আড়াল করে। তারপরে আপনি ডিভকে আপনার পছন্দ মতো একটি শিরোনাম দিতে পারেন।
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" />
</div>