স্টাইলিং ইনপুট টাইপ = "ফাইল" বোতাম
উত্তর:
স্টাইলিং ফাইল ইনপুটগুলি কুখ্যাতভাবে মুশকিল, কারণ বেশিরভাগ ব্রাউজারগুলি সিএসএস বা জাভাস্ক্রিপ্ট থেকে চেহারা পরিবর্তন করবে না।
এমনকি ইনপুটটির আকার পছন্দগুলির প্রতিক্রিয়া জানাবে না:
<input type="file" style="width:200px">পরিবর্তে, আপনাকে আকারের বৈশিষ্ট্যটি ব্যবহার করতে হবে:
<input type="file" size="60" />এর চেয়ে বেশি পরিশীলিত কোনও স্টাইলিংয়ের জন্য (যেমন ব্রাউজ বোতামটির চেহারা পরিবর্তন করা) আপনাকে দেশীয় ফাইল ইনপুটটির উপরে একটি স্টাইলযুক্ত বোতাম ও ইনপুট বাক্সকে ওভারলেড করার কৌশল অবলম্বনটি দেখতে হবে। আরএম দ্বারা www.quirksmode.org/dom/inputfile.html এ ইতিমধ্যে উল্লিখিত নিবন্ধটি আমি দেখেছি এটি সেরা।
হালনাগাদ
যদিও <input>সরাসরি কোনও ট্যাগকে স্টাইল করা শক্ত, তবে কোনও ট্যাগের সাহায্যে এটি সহজেই সম্ভব <label>। @ জোশক্রোজিয়ার থেকে নীচে উত্তর দেখুন: https://stackoverflow.com/a/25825731/10128619
এর জন্য আপনার জাভাস্ক্রিপ্টের দরকার নেই! এখানে একটি ক্রস-ব্রাউজার সমাধান:
এই উদাহরণটি দেখুন! - এটি Chrome / FF / IE- এ কাজ করে - (IE10 / 9/8/7)
সেরা পন্থাটি forহ'ল কোনও লুকানো ফাইল ইনপুট উপাদানটির সাথে একটি বৈশিষ্ট্যযুক্ত কোনও কাস্টম লেবেল উপাদান থাকতে পারে । ( forএটি idকাজ করার জন্য লেবেলের বৈশিষ্ট্য অবশ্যই ফাইলের উপাদানগুলির সাথে মেলে ।
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>বিকল্প হিসাবে, আপনি কেবলমাত্র একটি লেবেল দিয়ে ফাইল ইনপুট উপাদানটি মোড়ানো করতে পারেন: (উদাহরণস্বরূপ)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>স্টাইলিংয়ের ক্ষেত্রে, বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করে কেবল 1 ইনপুট উপাদানটি লুকান ।
input[type="file"] {
display: none;
}তারপরে আপনাকে যা করতে হবে তা হ'ল কাস্টম labelউপাদানটি style (উদাহরণস্বরূপ) ।
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}1 - এটি লক্ষণীয় যে আপনি যদি উপাদানটি ব্যবহার করে আড়াল করে থাকেন তবে display: noneএটি IE8 এবং নীচে কাজ করবে না। এছাড়াও jQuery যাচাইকরণ ডিফল্টরূপে লুকানো ক্ষেত্রগুলিকে বৈধতা দেয় না সে সম্পর্কে সচেতন হন । যদি সেগুলির মধ্যে দুটিই আপনার পক্ষে সমস্যা হয় তবে এই পরিস্থিতিতে কাজ করে এমন ইনপুট ( 1 , 2 ) আড়াল করার জন্য দুটি ভিন্ন পদ্ধতি রয়েছে ।
display: noneসেট করা থাকে তবে নির্বাচিত ফাইলটির নাম কীভাবে প্রদর্শিত হবে input[type=file]?
position: absolute; left: -99999remপরিবর্তে ব্যবহার করা উচিত display: none। বেশিরভাগ সময়, পর্দা পাঠকরা display: noneপদ্ধতিটি ব্যবহার করে লুকিয়ে থাকলে উপাদানগুলি পড়বে না ।
labelউপাদানগুলি buttons এবং inputs এর বিপরীতে কীবোর্ড অ্যাক্সেসযোগ্য নয় । সংযোজন tabindexকোনও সমাধান নয় কারণ labelইচ্ছামত ফোকাস থাকলে এবং ব্যবহারকারীর টিপস প্রবেশ করানো হলেও কার্যকর হবে না। আমি দৃষ্টিগোচরভাবে ইনপুটটি আড়াল করে এটি সমাধান করেছি , তাই এটি এখনও ফোকাস করা যায় এবং তারপরে পিতামাতাকে ব্যবহার :focus-withinকরে label: jsbin.com/fokexoc/2/edit?html,css,output
এই পদক্ষেপগুলি অনুসরণ করুন তারপরে আপনি নিজের ফাইল আপলোড ফর্মের জন্য কাস্টম শৈলী তৈরি করতে পারেন:
এটি সাধারণ এইচটিএমএল ফর্ম (দয়া করে এখানে নীচে লেখা HTML মন্তব্যগুলি পড়ুন)
<form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form>তারপরে ইনপুট ট্যাগ ফাইল করতে ক্লিক ইভেন্ট পাস করার জন্য এই সাধারণ স্ক্রিপ্টটি ব্যবহার করুন।
function getFile(){ document.getElementById("upfile").click(); }এখন আপনি কীভাবে ডিফল্ট স্টাইলগুলি পরিবর্তন করবেন তা চিন্তা না করে যে কোনও ধরণের স্টাইলিং ব্যবহার করতে পারেন।
আমি এটি খুব ভাল জানি কারণ আমি দেড় মাস ধরে ডিফল্ট শৈলীর পরিবর্তন করার চেষ্টা করছি। বিশ্বাস করুন, এটি খুব শক্ত কারণ বিভিন্ন ব্রাউজারে বিভিন্ন আপলোড ইনপুট ট্যাগ রয়েছে। সুতরাং আপনার কাস্টম ফাইল আপলোড ফর্মগুলি তৈরি করতে এটি ব্যবহার করুন। এখানে সম্পূর্ণ অটোমেটেড আপলোড কোড রয়েছে।
function getFile() {
document.getElementById("upfile").click();
}
function sub(obj) {
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
document.myForm.submit();
event.preventDefault();
}#yourBtn {
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor: pointer;
}<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>এটি CSS এর সাথে লুকান এবং ব্রাউজ বোতামটি সক্রিয় করতে $ (নির্বাচক) .ক্লিক () সহ একটি কাস্টম বোতাম ব্যবহার করুন। তারপরে ফাইল ইনপুট প্রকারের মান পরীক্ষা করতে একটি বিরতি সেট করুন। ব্যবধানটি ব্যবহারকারীর জন্য মানটি প্রদর্শন করতে পারে যাতে ব্যবহারকারী কী আপলোড হচ্ছে তা দেখতে পারে। ফর্মটি জমা দেওয়ার পরে ব্যবধানটি পরিষ্কার হয়ে যাবে [সম্পাদনা] দুঃখিত আমি খুব ব্যস্ত ছিলাম এই পোস্টটি আপডেট করার অর্থ ছিল, এখানে একটি উদাহরণ
<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button -->
<input type="submit" class="button" value="Change"/>
</div>$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});এইচটিএমএল
<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>সিএসএস
.new_Btn {
// your css propterties
}
#html_btn {
display:none;
}jQuery এর
$('.new_Btn').bind("click" , function () {
$('#html_btn').click();
});
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQueryফিডল : http://jsfiddle.net/M7BXC/
আপনি সাধারণ জাভাস্ক্রিপ্ট সহ jQuery ছাড়াই আপনার লক্ষ্যে পৌঁছে যেতে পারেন।
এখন নতুন বিটিএনটি এইচটিএমএল_বিটিএন-এর সাথে লিঙ্কযুক্ত এবং আপনি নিজের পছন্দ মতো নতুন বিটিএন স্টাইল করতে পারবেন: ডি
সমস্ত রেন্ডারিং ইঞ্জিনগুলি তৈরি হয়ে গেলে স্বয়ংক্রিয়ভাবে একটি বোতাম জেনারেট করে <input type="file">। .তিহাসিকভাবে, এই বোতামটি সম্পূর্ণ অ-স্টাইলযোগ্য হয়েছে। তবে ট্রাইডেন্ট এবং ওয়েবকিট ছদ্ম-উপাদানগুলির মাধ্যমে হুক যুক্ত করেছে ooks
ত্রিশূল
আইই 10 হিসাবে, ফাইল ইনপুট বোতামটি ::-ms-browseসিউডো-এলিমেন্ট ব্যবহার করে স্টাইল করা যেতে পারে । মূলত, সিএসএসের যে কোনও নিয়ম আপনি নিয়মিত বোতামে প্রয়োগ করেন তা ছদ্ম-উপাদানটিতে প্রয়োগ করা যেতে পারে। উদাহরণ স্বরূপ:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}<input type="file">উইন্ডোজ 8-এ আই 10 তে নিম্নলিখিত হিসাবে প্রদর্শিত হয়:
ওয়েবকিট
ওয়েবকিট ::-webkit-file-upload-buttonসিউডো-এলিমেন্টের সাথে তার ফাইল ইনপুট বোতামের জন্য একটি হুক সরবরাহ করে । আবার, কোনও সিএসএস বিধি প্রয়োগ করা যেতে পারে, সুতরাং ট্রাইডেন্ট উদাহরণটি এখানেও কাজ করবে:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}<input type="file">এটি ওএস এক্স-এর ক্রোম 26-এ নিম্নলিখিত হিসাবে প্রদর্শিত হয়:
আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে এটি আমার পক্ষে কাজ করেছে:
Http: //www.abe beautysite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ দেখুন
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="btn btn-primary btn-file">
Browse...<input type="file">
</span>যা নিম্নলিখিত ফাইল ইনপুট বোতাম উত্পাদন করে:
গুরুতরভাবে, http: //www.abe beautysite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ দেখুন
দেশী টানুন এবং ড্রপ সমর্থন সহ এখানে কাজ উদাহরণ: https://jsfiddle.net/j40xvkb3/
কোনও ফাইল ইনপুট স্টাইল করার সময়, আপনাকে ইনপুট সরবরাহ করে এমন কোনও নেটিভ ইন্টারঅ্যাকশন ভাঙা উচিত নয় ।
display: noneপদ্ধতির নেটিভ ড্র্যাগ এবং ড্রপ সমর্থন বিরতি।
কোনও কিছু না ভাঙ্গতে, আপনার opacity: 0ইনপুটটির জন্য পদ্ধতির ব্যবহার করা উচিত এবং একটি মোড়কের মধ্যে আপেক্ষিক / পরম প্যাটার্ন ব্যবহার করে এটি অবস্থান করা উচিত।
এই কৌশলটি ব্যবহার করে আপনি সহজেই ব্যবহারকারীর জন্য ক্লিক / ড্রপ জোন স্টাইল করতে পারেন এবং স্টাইল dragenterআপডেট করতে ইভেন্টে জাভাস্ক্রিপ্টে কাস্টম ক্লাস যুক্ত করতে পারেন এবং ব্যবহারকারীকে যাতে তিনি একটি ফাইল ফেলে দিতে পারেন তা দেখতে প্রতিক্রিয়া জানাতে পারেন।
এইচটিএমএল:
<label for="test">
<div>Click or drop something here</div>
<input type="file" id="test">
</label>সিএসএস:
input[type="file"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
}
div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
border: 3px dotted #bebebe;
border-radius: 10px;
}
label {
display: inline-block;
position: relative;
height: 100px;
width: 400px;
}এখানে একটি কার্যকারী উদাহরণ রয়েছে ( dragoverইভেন্ট হ্যান্ডেল করার জন্য অতিরিক্ত জেএস এবং ফাইলগুলি ফেলে দেওয়া সহ)।
https://jsfiddle.net/j40xvkb3/
আশা করি এটি সাহায্য করেছে!
আমি নীচের কোড ব্যবহার করে খাঁটি সিএসএস দিয়ে এটি করতে সক্ষম হয়েছি । আমি বুটস্ট্র্যাপ এবং ফন্ট-দুর্দান্ত ব্যবহার করেছি।
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<label class="btn btn-default btn-sm center-block btn-file">
<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<input type="file" style="display: none;">
</label> <label>
<input type="file" />
</label>আপনি ইনপুটটির জন্য কোনও লেবেলের ভিতরে আপনার ইনপুট টাইপ = "ফাইল" মোড়ানো করতে পারেন। আপনি চাইলে লেবেলটি স্টাইল করুন এবং প্রদর্শন সহ ইনপুটটি আড়াল করুন: কোনওটি নয়;
এখানে এমন একটি সমাধান রয়েছে যা <input type="file" />উপাদানটিকে আসলে স্টাইল করে না তবে পরিবর্তে <input type="file" />অন্যান্য উপাদানগুলির শীর্ষে একটি উপাদান ব্যবহার করে (যা স্টাইলযুক্ত হতে পারে)। <input type="file" />উপাদান অত: পর সত্যিই দৃশ্যমান নয় সামগ্রিক বিভ্রম একটি চমত্কারভাবে স্টাইল ফাইল আপলোড নিয়ন্ত্রণ হয়।
আমি সম্প্রতি এই সমস্যাটি পেরিয়ে এসেছি এবং স্ট্যাক ওভারফ্লো সম্পর্কে উত্তরগুলির আধিক্য সত্ত্বেও, কোনওটিই बिलটির পক্ষে যথাযথ বলে মনে হয় নি। শেষ পর্যন্ত, আমি এটি কাস্টমাইজ করে শেষ করেছি যাতে একটি সহজ এবং মার্জিত সমাধান হয়।
আমি এটি ফায়ারফক্স, আইই (11, 10 এবং 9), ক্রোম এবং অপেরা, আইপ্যাড এবং কয়েকটি অ্যান্ড্রয়েড ডিভাইসেও পরীক্ষা করেছি।
এখানে জেএসফিডাল লিঙ্কটি -> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
$('.uploadButton').click(function() {
var fileName = $("#fileUpload").val();
if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});body {
background-color:Black;
}
div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}
div.upload:hover {
opacity:0.95;
}
div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}
.fileName {
font-family: Arial;
font-size:14px;
}
.upload + .uploadButton {
height:38px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>আশাকরি এটা সাহায্য করবে!!!
এটি jquery সঙ্গে সহজ। কিছুটা সংশোধন করে রায়ানের পরামর্শের কোড উদাহরণ দেওয়া ।
বেসিক এইচটিএমএল:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">আপনি প্রস্তুত থাকাকালীন ইনপুটটিতে স্টাইলিং সেট করতে ভুলবেন opacity: 0
না : আপনি সেট করতে পারবেন না display: noneকারণ এটি ক্লিকযোগ্য হতে হবে। তবে আপনি যদি এটি পছন্দ করেন তবে এটি "নতুন" বোতামের অধীনে বা জেড-ইনডেক্সের সাথে অন্য কোনও কিছুতে টেক ইন করতে পারেন।
আপনি যখন চিত্রটিতে ক্লিক করেন তখন আসল ইনপুটটি ক্লিক করতে কিছু jquery সেটআপ করুন।
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});এখন আপনার বোতামটি কাজ করছে। পরিবর্তিত হলে মানটি কেটে পেস্ট করুন।
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();তাহ দাহ! আপনাকে আরও ভাল অর্থবহ কিছুতে ভাল () সংশ্লেষ করতে হতে পারে তবে আপনার প্রস্তুত হওয়া উচিত।
আপনার দুর্দান্ত বোতাম বা উপাদানটির উপরে আপলোড ফাইল বোতামটি রাখুন এবং এটি লুকান।
খুব সহজ এবং যে কোনও ব্রাউজারে কাজ করবে
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>শৈলী
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}দৃশ্যমানতা: লুকানো ট্রিক
আমি সাধারণত visibility:hiddenকৌতুক জন্য যাই
এটি আমার স্টাইলযুক্ত বোতাম
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>এটি ইনপুট টাইপ = ফাইল বোতাম। visibility:hiddenবিধি নোট করুন
<input type="file" id="upload" style="visibility:hidden;">এগুলি একসাথে আঠালো করার জন্য এটি জাভাস্ক্রিপ্ট বিট। এটা কাজ করে
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>style="visibility:hidden"খুব দীর্ঘ, সহজভাবে ব্যবহার করুন hidden। এছাড়াও, click()কোনও ব্রাউজারের জন্য কাজ করে এবং এখনকার মতো কোনও সুরক্ষার কারণ নেই এবং কোনও ডিভাইসে এটি বৈধ উপায় এবং ক্লাসিক trigger()
আমি ভাবতে পারি একমাত্র উপায় হ'ল জাভাস্ক্রিপ্টের বোতামটি রেন্ডার হওয়ার পরে এটি সন্ধান করা এবং এটিতে একটি শৈলী নির্ধারণ করা
আপনি এই লেখার দিকে তাকান
<input type="file" name="media" style="display-none" onchange="document.media.submit()">ফাইল ইনপুট ট্যাগটি কাস্টমাইজ করার জন্য আমি সাধারণত সরল জাভাস্ক্রিপ্ট ব্যবহার করব A একটি লুকানো ইনপুট ক্ষেত্র, বোতামের ক্লিকের উপর, জাভাস্ক্রিপ্টটি লুকানো ক্ষেত্রটি কল করে, কোনও সিএসএস বা গুচ্ছের গুচ্ছ সহ সহজ সমাধান call
<button id="file" onclick="$('#file').click()">Upload File</button>click()ইনপুট টাইপ ফাইলের জন্য ইভেন্ট ফায়ার পদ্ধতি ব্যবহার করতে পারবেন না । সুরক্ষা কারণে বেশিরভাগ ব্রাউজার অনুমতি দেয় না।
এখানে আমরা টাইপ ফাইলের ইনপুট ট্রিগার করতে একটি স্প্যান ব্যবহার করি এবং আমরা কেবল সেই স্প্যানটি কাস্টমাইজ করেছি , সুতরাং আমরা এই পদ্ধতিতে কোনও স্টাইলিং যুক্ত করতে পারি।
নোট করুন যে আমরা দৃশ্যমানতার সাথে ইনপুট ট্যাগ ব্যবহার করি: লুকানো বিকল্প এবং স্প্যানে এটিকে ট্রিগার করে।
.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>
<span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
Attach file
</span>উপাদান / কৌনিক ফাইল আপলোড দিয়ে এটি করার একটি দুর্দান্ত উপায়। আপনি এটি বুটস্ট্র্যাপ বোতাম দিয়ে করতে পারেন।
নোট আমি এর <a>পরিবর্তে ব্যবহার করেছি <button>ক্লিক ইভেন্টগুলি বুদ্বুদ করতে অনুমতি দেয়।
<label>
<input type="file" (change)="setFile($event)" style="display:none" />
<a mat-raised-button color="primary">
<mat-icon>file_upload</mat-icon>
Upload Document
</a>
</label>কেবল সিএসএস
এটি খুব সাধারণ এবং সহজ ব্যবহার করুন
এইচটিএমএল:
<label>Attach your screenshort</label>
<input type="file" multiple class="choose">CSS:
.choose::-webkit-file-upload-button {
color: white;
display: inline-block;
background: #1CB6E0;
border: none;
padding: 7px 15px;
font-weight: 700;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
font-size: 10pt;
}হয়ত প্রচুর অ্যাঞ্জারস। তবে আমি এফএ-বোতামগুলির সাথে খাঁটি সিএসএসে এটি পছন্দ করি:
.divs {
position: relative;
display: inline-block;
background-color: #fcc;
}
.inputs {
position:absolute;
left: 0px;
height: 100%;
width: 100%;
opacity: 0;
background: #00f;
z-index:999;
}
.icons {
position:relative;
}<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>
<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>"দুর্দান্ত" সিএসএস-কেবলমাত্র সমাধানগুলি বোকা বানাবেন না যা আসলে খুব ব্রাউজার-নির্দিষ্ট, বা বাস্তব বোতামের উপরে স্টাইলযুক্ত বোতামটি আবৃত করে দেয় বা আপনাকে এর <label>পরিবর্তে একটি ব্যবহার করতে বাধ্য করে <button>বা এই জাতীয় কোনও হ্যাক । এটি সাধারণ ব্যবহারের জন্য কাজ করার জন্য জাভাস্ক্রিপ্ট প্রয়োজনীয়। আপনি আমাকে বিশ্বাস না করলে দয়া করে কী Gmail এবং ড্রপজোন এটি করে তা অধ্যয়ন করুন।
আপনার চাইলে কেবল একটি সাধারণ বোতামটি স্টাইল করুন, তারপরে আপনার স্টাইলযুক্ত বোতামটিতে কোনও লুকানো ইনপুট উপাদান তৈরি করতে এবং লিঙ্ক করার জন্য একটি সাধারণ জেএস ফাংশনটি কল করুন।
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>লক্ষ্য করুন যে প্রতিবার ব্যবহারকারী কোনও ফাইল চয়ন করার পরে উপরের কোডটি কীভাবে এটি পুনরায় লিঙ্ক করে। এটি গুরুত্বপূর্ণ কারণ ব্যবহারকারী "ফাইলের নাম পরিবর্তন করলেই" অনচেঞ্জ "বলা হয়। তবে আপনি সম্ভবত ব্যবহারকারী যখনই এটি সরবরাহ করবেন তখন ফাইলটি পেতে চান।
labelগেলে, নির্বাচিত ফাইলের নাম বা পথটি প্রদর্শন করতে না পারলে পদ্ধতির কাজ হয় work সুতরাং অগত্যা বলার অপেক্ষা রাখে না যে একমাত্র ইস্যুটির সমাধানের জন্য জেএস প্রয়োজন।
রূপান্তরিত ফাইলের নাম সহ একাধিক ফাইল সমাধান
বুটস্ট্র্যাপ উদাহরণ
এইচটিএমএল:
<div>
<label class="btn btn-primary search-file-btn">
<input name="file1" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
<div>
<label class="btn btn-primary search-file-btn">
<input name="file2" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>1. jQuery সহ জেএস:
$().ready(function($){
$('.search-file-btn').children("input").bind('change', function() {
var fileName = '';
fileName = $(this).val().split("\\").slice(-1)[0];
$(this).parent().next("span").html(fileName);
})
});২.জিক্যুরি ছাড়াই জেএস
Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
item.addEventListener("change", function() {
var fileName = '';
fileName = this.value.split("\\").slice(-1)[0];
this.parentNode.nextElementSibling.innerHTML = fileName;
});
});এখানে একটি সমাধান রয়েছে যা এটি নির্বাচিত ফাইলটির নামও দেখায়: http://jsfiddle.net/raft9pg0/1/
এইচটিএমএল:
<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>জাতীয়:
$(function() {
$("input:file[id=file-upload]").change(function() {
$("#file-upload-value").html( $(this).val() );
});
});সিএসএস:
input[type="file"] {
display: none;
}
.custom-file-upload {
background: #ddd;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px; }fakepathপথটি নয়?
এই সপ্তাহে আমার বোতামটি কাস্টম করা এবং নির্বাচিত ফাইলটির নামটি পাশাপাশি রেখে প্রদর্শন করা প্রয়োজন, সুতরাং উপরের উত্তরগুলি কয়েকটি পড়ার পরে (ধন্যবাদ বিটিডাব্লু) আমি নিম্নলিখিত প্রয়োগটি নিয়ে এসেছি:
এইচটিএমএল:
<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>সিএসএস
input[type='file'] {
color: #a1bbd5;
display: none;
}
.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}
label{
color: #a1bbd5;
border-radius: 3px;
}জাভাস্ক্রিপ্ট (কৌণিক)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});মূলত আমি এনজি-ফাইল-আপলোড লাইব নিয়ে কাজ করছি, কৌণিক অনুসারে আমি ফাইলের নামটি আমার স্কোপের সাথে আবদ্ধ করছি এবং এটিকে 'কোনও ফাইল বাছাই করা হয়নি' এর প্রাথমিক মান দিচ্ছি, আমি অনফাইলেলেক্ট () ফাংশনটিও বদ্ধ করছি আমার সুযোগ তাই যখন কোনও ফাইল নির্বাচন হয়ে যায় আমি এনজি-আপলোড এপিআই ব্যবহার করে ফাইলের নামটি পাই এবং এটিকে $ স্কোপ.ফিলনামে অর্পণ করি।
স্টাইলযুক্ত ক্লিক করার সময় ফাংশনটি <input>ব্যবহার করে কেবল একটি ক্লিক সিমুলেট করুন । আমি একটি থেকে আমার নিজস্ব বোতাম তৈরি করেছি এবং তারপরে আমার ক্লিক করার সময় একটি ক্লিক ট্রিগার করেছিলাম । এটি আপনাকে আপনার বাটনটি তৈরি করতে দেয় তবে আপনি চান কারণ এটি আপনার ফাইলটিতে ক্লিক ক্লিক করে । তারপরে আপনার ব্যবহার করুন ।trigger()<div><div>input<div><div><input>display: none<input>
// div styled as my load file button
<div id="simClick">Load from backup</div>
<input type="file" id="readFile" />
// Click function for input
$("#readFile").click(function() {
readFile();
});
// Simulate click on the input when clicking div
$("#simClick").click(function() {
$("#readFile").trigger("click");
});সর্বোত্তম উপায়টি সিউডো উপাদানটি ব্যবহার করা: পরে বা: আগে কোনও উপাদান ডি ইনপুটকে ছাড়িয়ে যায়। তারপরে আপনার ইচ্ছামতো সেই সিউডো উপাদানটি স্টাইল করুন। আমি আপনাকে সমস্ত ইনপুট ফাইলের জন্য সাধারণ স্টাইল হিসাবে নিম্নলিখিত হিসাবে পুনঃসংশোধন করছি:
input {
height: 0px;
outline: none;
}
input[type="file"]:before {
content: "Browse";
background: #fff;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #e0e0e0;
top: -1px;
line-height: 35px;
color: #b6b6b6;
padding-left: 5px;
display: block;
}আমি যে সর্বোত্তম উপায়টি খুঁজে পেয়েছি তা হ'ল input type: fileএটির পরে সেটি সেট করা display: none। এটি একটি দিন id। আপনি ফাইল ইনপুট খুলতে চান একটি বোতাম বা অন্য যে কোনও উপাদান তৈরি করুন।
তারপরে এটিতে একটি ইভেন্ট শ্রোতা যুক্ত করুন (বোতাম) যা ক্লিক করলে মূল ফাইলের ইনপুটটিতে ক্লিক ক্লিক করে। হ্যালো নামের বোতামে ক্লিক করা পছন্দ করে তবে এটি একটি ফাইল উইন্ডো খুলবে।
উদাহরণ কোড
//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn">
<i class="paper plane icon"></i>
</button>
<input type="file" id="file" class="input-file" />জাভাস্ক্রিপ্ট
var attachButton=document.querySelector('.attach-button');
attachButton.addEventListener('click', e=>{
$('#file').trigger("click")
})সিএসএস এখানে অনেক কিছু করতে পারে ... একটি সামান্য কৌশল নিয়ে ...
<div id='wrapper'>
<input type='file' id='browse'>
</div>
#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}
#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}:: রেফারেন্স :: http://site-o-matic.net/?viewpost=19
-abbey
একটি ছবিতে ফাইল বোতামটি স্যুইচ করার জন্য আমি খুব সহজ একটি পদ্ধতি খুঁজে পেয়েছি। আপনি কেবল একটি ছবি লেবেল করে ফাইল বোতামের উপরে রাখুন।
<html>
<div id="File button">
<div style="position:absolute;">
<!--This is your labeled image-->
<label for="fileButton"><img src="ImageURL"></label>
</div>
<div>
<input type="file" id="fileButton"/>
</div>
</div>
</html>লেবেলযুক্ত ছবিতে ক্লিক করার পরে আপনি ফাইল বোতামটি নির্বাচন করুন।
শুধুমাত্র এই পদ্ধতির আপনাকে পুরো নমনীয়তা দেয়! ইএস 6 / ভ্যানিলাজেএস!
এইচটিএমএল:
<input type="file" style="display:none;"></input>
<button>Upload file</button>জাভাস্ক্রিপ্ট:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('input[type="file"]').click();
});এটি ইনপুট-ফাইল বোতামটি আড়াল করে, তবে হুডের নীচে অন্য একটি সাধারণ বোতাম থেকে এটি ক্লিক করে, আপনি অবশ্যই অন্য যে কোনও বোতামের মতো স্টাইল করতে পারবেন। অযথা ডোম-নোড বাদে কোনও খারাপ দিক ছাড়াই এটিই একমাত্র সমাধান। ধন্যবাদ display:none;, ইনপুট-বোতামটি ডিওমে কোনও দৃশ্যমান স্থান সংরক্ষণ করে না।
(কাকে এই প্রপস দিতে হবে তা আমি আর জানি না। তবে স্ট্যাকওভারফ্লোতে কোথাও থেকে আমি এই ধারণাটি পেয়েছি।)