<ইনপুট টাইপ = "ফাইল"> কীভাবে কাস্টমাইজ করবেন?

164

চেহারা পরিবর্তন করা সম্ভব <input type="file">?

html  css  file-upload  input 
— নবাগত কোডার
সূত্র
পাঠ্য ক্ষেত্রটি থাকার কারণ হ'ল এটি ব্যবহারকারীদের ব্রাউজ করার পরে এবং তাদের ফাইল নির্বাচন করার পরে ফাইলের পথটি দেখায়।
— কে z
Oooppss .. মনে হচ্ছে যে তার পথ ফায়ারফক্স এটা পরিচালনা ...
— নবাগত সংকেতপদ্ধতিরচয়িতা
ঠিক তাই আমরা স্পষ্ট হয়েছি, তারা ফাইলটি ব্রাউজ করার পরেও তাদের ফর্ম জমা দেওয়ার বোতামের সাথে ফর্মটি জমা দিতে হবে।
— কে জেড
2
এটি করার জন্য আরও সহজ পদ্ধতির জন্য দয়া করে এই সমাধানটি দেখুন ।
— জোয়েজিজে 50
1
কোনও পুরানো প্রশ্নের নকল হিসাবে ভবিষ্যতের প্রশ্ন চিহ্নিত করা কিছুটা অদ্ভুত। এটি কি এমন নজির স্থাপন করবে যে প্রশ্নগুলি পুনরায় জিজ্ঞাসা করা এবং তারপরে মূলগুলি বন্ধ করা ঠিক আছে? সদৃশগুলি এখানে ইতিমধ্যে একটি বড় সমস্যা। বিদ্যমান উত্তরগুলি বাসি হয়ে গেছে এমন প্রশ্নটি পুনরায় জিজ্ঞাসা করার মতো মূল্য আমি দেখতে পাচ্ছি , তবে প্রশ্নটি সম্পাদনা করা এবং নতুন উত্তর যুক্ত / সম্পাদনা করা সর্বদা সম্ভব।
— অ্যালেক্স

উত্তর:

235

আপনি input[type=file]নিজেরাই নিয়ন্ত্রণ সম্পর্কে খুব বেশি পরিবর্তন করতে পারবেন না ।

যেহেতু labelকোনও ইনপুট দিয়ে সঠিকভাবে যুক্ত উপাদানকে ক্লিক করা এটি সক্রিয় / ফোকাস করবে, তাই আমরা labelওএস ব্রাউজ সংলাপটি ট্রিগার করতে একটি ব্যবহার করতে পারি ।

আপনি এটি কীভাবে করতে পারেন তা এখানে…

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
স্নিপেট প্রসারিত করুন

ফর্ম নিয়ন্ত্রণের জন্য সিএসএস এটি অদৃশ্য হিসাবে প্রদর্শিত হবে এবং দস্তাবেজ বিন্যাসে স্থান গ্রহণ করবে না, তবে এটি এখনও বিদ্যমান থাকবে যাতে এটির মাধ্যমে সক্রিয় করা যায় label।

আপনি যদি নির্বাচনের পরে ব্যবহারকারীর বাছাই করা পথটি প্রদর্শন করতে চান, আপনি changeজাভাস্ক্রিপ্টের মাধ্যমে ইভেন্টটি শুনতে পারেন এবং তারপরে ব্রাউজারটি আপনাকে যে পথটি সরবরাহ করে তা পড়তে পারে (সুরক্ষার কারণে এটি সঠিক পথ সম্পর্কে আপনাকে মিথ্যা বলতে পারে)। শেষ ব্যবহারকারীর পক্ষে এটি সুন্দর করার একটি উপায় হ'ল ফিরে আসা পথের বেস নামটি ব্যবহার করা (যাতে ব্যবহারকারী কেবলমাত্র নির্বাচিত ফাইলের নামটি দেখতে পান)।

এটি স্টাইল করার জন্য টাইমপানাসের একটি দুর্দান্ত গাইড রয়েছে ।

— Alex
সূত্র
2
আমি বিশ্বাস করি, এটি ভাল স্টাইলগুলি, বিবেচনা করে আমরা #container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; }
— ধারকটির
1
ব্যবহার <label>(যেমন Tympanus দ্বারা দেখানো হয়েছে) অনেক বেশী শব্দার্থিক এবং কম হল hacky। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসক্লেস্কু
1
@ ড্যানডাসকলেসকু আমি সম্মত, যদি আমি সঠিকভাবে মনে করতে পারি (২০১১ সালে ফিরে) এটির সমস্যা ছিল, সম্ভবত or বা 7.. এটিকে এখনই ভবিষ্যতে আনার জন্য আমি এই উত্তরটি সম্পাদনা করব।
— অ্যালেক্স
লেবেল ব্যবহার করা কেন ভাল হবে? আপনি লেবেলগুলি ট্যাব করতে পারবেন না, একটি কথোপকথন সক্রিয় করার জন্য একটি বোতাম আমার কাছে আরও বেশি বোঝায় sense
— লুই-মেরি ম্যাথিউজ
1
@ অ্যালেক্স, এটি ফাইলটির নাম প্রদর্শন করছে না।
— নরেন ভার্মা
33

এরকম কিছু হতে পারে?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>
— Konservin
সূত্র
1
এই ক্ষেত্রে অর্থাত্ 9 টি যদি ইফ্রেমে ফর্মটি প্রেরণ করতে দেয় না।
— এক্স-ইউরি
@ এক্স-ইউরি মানে কি?
— মাইকেল ফ্যালিক্স
2
যতদূর আমার মনে আছে, অর্থাৎ 9 (এবং সম্ভবত অন্যরা) ফর্মটি যদি ইফ্রেমে পাঠাতে দেয় না কারণ ব্যবহারকারীরা ইনপুট-ফাইলটি ক্লিক করেন নি।
— x-yuri
display: noneপৃষ্ঠাটি কম অ্যাক্সেসযোগ্য করে তুলতে ট্যাব ক্রম থেকে ইনপুট সরিয়ে ফেলবে। ব্যবহার <label>(যেমন Tympanus দ্বারা দেখানো হয়েছে) অনেক বেশী শব্দার্থিক এবং কম হল hacky। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসকলেসকু
কোডটি
— কনস্টান্টিন গ্রো
23 
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

কেন না? ^: _ ^

উদাহরণ এখানে দেখুন

— jt3k
সূত্র
4
@ ইনাকিআইবারোলা অ্যাটাক্সা আপনি কি এটি সমর্থন করার জন্য ডেটা সরবরাহ করতে পারেন?
— বেন লেগিগেরো
1
৫১ ক্রোমে কোনও কিছুর স্টাইল করে না। ব্যবহার <label>(টিম্পানাসের মতো দেখানো হয়েছে) একটি শব্দার্থগতভাবে সঠিক সমাধান। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসক্লেস্কু
12

আপনি যদি এখানে বুটস্ট্র্যাপ ব্যবহার করেন তবে এটি আরও ভাল সমাধান:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

আইই 8 এবং নীচের জন্য http: //www.abe beautysite.net/whipping-file-inputs-into-shape-with-bootstrap-3//

সূত্র: https://stackoverflow.com/a/18164555/625952

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

ওয়েবকিটে আপনি এটি ব্যবহার করে দেখতে পারেন ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}
— ক্রিস্টোফার রেড
সূত্র
আপনি কি ফায়ার ফক্সের জন্য অনুরূপ কোনও সমাধান জানেন? এটি কি বিদ্যমান? )
— আর্টেম জেড।
5

সবার আগে এটি একটি ধারক:

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

দ্বিতীয়ত, এটি সিএসএস স্টাইল, যদি আপনি আরও কাস্টমাইজেশন চান, কেবল চোখ রাখুন :)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

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

— জুড়ি করাসভভ
সূত্র
আমি ভাবছি কেন আপনি এটিকে right: 0বদলে তৈরি করেন না left: 0? এই ভাবে আপনার পাত্রে বাইরে টেক্সট বাক্স থাকবে। পাঠ্য বাক্সে ক্লিক করা ফাইল ডায়ালগটি খুলবে না। এছাড়াও, আমি বিশ্বাস করি যে ইনপুট ফাইলটিকে বড় করে তোলা আরও font-sizeভাল ধারণা, তারপরে ব্যবহার widthএবং height।
— এক্স-ইউরি
5

কৌশলটি ইনপুটটি আড়াল করে লেবেলটি কাস্টমাইজ করে।

এখানে চিত্র বর্ণনা লিখুন

এইচটিএমএল:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

সিএসএস:

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

জাতীয়:

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

আপনি এই উদাহরণটি যাচাই করতে পারেন: https://jsfiddle.net/rjurado/hnf0zhy1/4/

— drinor
সূত্র
আমি পছন্দ করি যে আপনার অন্য কোনও ফন্টের চেয়ে দুর্দান্ত হরফ আইকনটি কীভাবে ব্যবহার করে।
— ম্যাক্স ভয়েসর্ড
4

আপনি যদি কেবলমাত্র একটি ব্যবহার করেন <label>, লুকান <input>এবং লেবেলটি কাস্টমাইজ করেন তবে এটি আরও অনেক ভাল ।

এইচটিএমএল:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

সিএসএস: 

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}
— বোগদান এম।
সূত্র
display: noneট্যাব ক্রম থেকে উপাদানটি সরিয়ে ফেলবে। (টাইমপানাসের দেখানো হিসাবে) ব্যবহার করা<label> শব্দার্থগতভাবে সঠিক উপায়, তবে কিছু সংশোধন প্রয়োজন। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসক্লেস্কু
2

নির্বাচিত ফাইলের পথ দেখাতে আপনি এইচটিএমএল করে দেখতে পারেন: 

<div class="fileinputs">
    <input type="file" class="file">
</div>

এবং জাভাস্ক্রিপ্টে:

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

এবং শৈলী: 

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}
— saghar.fadaei
সূত্র
সালাম সাগর, এটি আমার পক্ষে সেরা উত্তর ছিল, ধন্যবাদ
— uMedia
2

বুটস্ট্র্যাপ উদাহরণ

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>
— juliankmazo
সূত্র
1

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

এখানে কোডেপেন: http://codepen.io/emiemi/pen/zxNXWR

জাতীয়:

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

এইচটিএমএল:

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

— EMI-সি
সূত্র
0

এখানে একটি উপায় যা আমি পছন্দ করি কারণ এটি ইনপুটটিকে পুরো ধারকটি পূরণ করে। কৌতুকটি হ'ল "ফন্ট-আকার: 100px", এবং এটি "ওভারফ্লো: লুকানো" এবং আপেক্ষিক অবস্থানের সাথে যেতে হবে।

<div id="upload-file-container" >
   <input type="file" />
</div>

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}
— Vanja
সূত্র
এটি তৈরি করতে এটি position: absolute; right: 0; font-size: <many>px;
— অর্থবোধ
0

আপনি এগুলি স্টাইল করতে পারেন তবে ইতিমধ্যে উপস্থিত উপাদানগুলি আপনি মুছে ফেলতে পারবেন না। আপনি যদি সৃজনশীল হন তবে আপনি এটি নিয়ে কাজ করতে পারেন এবং এর মতো কিছু করতে পারেন:

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

আমি আপনাকে এই কোডটি নিয়ে ঘুরে দেখার পরামর্শ দিচ্ছি, লাইনগুলি সরিয়ে ফেলুন, আপনার নিজের যুক্ত করুন, যতক্ষণ না আপনার পছন্দ মতো কিছু পাওয়া যায় ততক্ষণ যা কিছু করুন!

— বেন লেগিয়েরো
সূত্র
1
"একটি ফাইল চয়ন করুন" শব্দগুলি স্টাইল করে না। ব্যবহার <label>(যেমন Tympanus দ্বারা দেখানো হয়েছে) শব্দার্থিক এবং অফার সম্পূর্ণ customizability হয়। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসক্লেস্কু
1
@ ড্যানডাসকলেস্কু আপনি ঠিক বলেছেন! আমি কেবল একটি খাঁটি সিএসএস সমাধান দিচ্ছি, যদি আপনি আপনার সেটআপ দিয়ে এইচটিএমএল পরিবর্তন করতে না পারেন।
— বেন লেগিগেরো
0

আপনার পছন্দসই সিএসএস ব্যবহার করে আপনি চাইলে কেবল একটি সাধারণ বোতাম স্টাইল করুন।

তারপরে আপনার স্টাইলযুক্ত বোতামটিতে কোনও লুকানো ইনপুট উপাদান তৈরি করতে এবং লিঙ্ক করতে একটি সাধারণ জেএস ফাংশন কল করুন। লুকানোর অংশটি করতে ব্রাউজার-নির্দিষ্ট সিএসএস যুক্ত করবেন না।

<!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>

লক্ষ্য করুন যে প্রতিবার ব্যবহারকারী কোনও ফাইল চয়ন করার পরে উপরের কোডটি কীভাবে এটি পুনরায় লিঙ্ক করে। এটি গুরুত্বপূর্ণ কারণ ব্যবহারকারী "ফাইলের নাম পরিবর্তন করলেই" অনচেঞ্জ "বলা হয়। তবে আপনি সম্ভবত ব্যবহারকারী যখনই এটি সরবরাহ করবেন তখন ফাইলটি পেতে চান।

আরও তথ্যের জন্য, ড্রপজোন এবং জিমেইল আপলোডগুলি অনুসন্ধান করুন।

— personal_cloud
সূত্র
0 

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
স্নিপেট প্রসারিত করুন

এটি আমার সম্পূর্ণরূপে ক্রিয়াকলাপযুক্ত ফাইল আপলোড / জেকারি এবং জাভাস্ক্রিপ্ট (ভিজ্যুয়াল স্টুডিও) ব্যবহার করে সংযুক্তি। এটি দরকারী হবে!

কোডটি মন্তব্য বিভাগে পাওয়া যাবে!

লিঙ্ক: https://youtu.be/It38OzMAeig

উপভোগ করুন :) 

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
স্নিপেট প্রসারিত করুন

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
 <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
স্নিপেট প্রসারিত করুন

— মিলন মদুবাশা
সূত্র
0

এখানে একটি দ্রুত খাঁটি সিএসএস ওয়ার্কারআউন্ড (ক্রোমে কাজ করে এবং এতে ফায়ারফক্স ফ্যালব্যাক অন্তর্ভুক্ত রয়েছে) সহ ফাইলের নাম, একটি লেবেল এবং একটি কাস্টম আপলোড বোতাম এটি করা উচিত - জাভাস্ক্রিপ্টের কোনও প্রয়োজন নেই! 🎉

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

.fileUploadInput {
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 1; }
  
  .fileUploadInput label {
    display: flex;
    align-items: center;
    color: setColor(primary, 0.5);
    background: setColor(white);
    transition: .4s ease;
    font-family: arial, sans-serif;
    font-size: .75em;
    font-weight: regular; }
    
  .fileUploadInput input {
    position: relative;
    z-index: 1;
    padding: 0 gap(m);
    width: 100%;
    height: 50px;
    border: 1px solid #323262;
    border-radius: 3px;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: regular; }
    .fileUploadInput input[type="file"] {
      padding: 0 gap(m); }
      .fileUploadInput input[type="file"]::-webkit-file-upload-button {
        visibility: hidden;
        margin-left: 10px;
        padding: 0;
        height: 50px;
        width: 0; }
        
  .fileUploadInput button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    line-height: 0;
    user-select: none;
    color: white;
    background-color: #323262;
    border-radius: 0 3px 3px 0;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: 800; }
    .fileUploadInput button svg {
      width: auto;
      height: 50%; }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  outline: 0;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
  user-select: text;
  line-height: 1.333em; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(66, 50, 98, 0.05); }

.container {
  padding: 25px;
  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: white; }

@-moz-document url-prefix() {
.fileUploadInput button{
    display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->

<div class="container">
    <div class="fileUploadInput">
    <label>✨ Upload File</label>
    <input type="file" />
    <button>+</button></div>
</div>
স্নিপেট প্রসারিত করুন

— lazercaveman
সূত্র
-2

এখানে সম্প্রতি আমি একভাবে রইল, কিছুটা jQuery দিয়ে

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

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

জাভাস্ক্রিপ্ট / jQuery অংশ জন্য:

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

এই উদাহরণে, আমি ফাইল আপলোড ট্রিগার করতে একটি "অ্যাঙ্কর" ট্যাগ রেখেছি। আপনি যা চান তার সাথে প্রতিস্থাপন করতে পারেন, সঠিক ফাংশনটির সাথে "অনক্লিক" বৈশিষ্ট্যটি মনে রাখবেন।

আশাকরি এটা সাহায্য করবে!

পিএস: সিডিএন বা অন্য কোনও উত্স থেকে jQuery অন্তর্ভুক্ত করতে ভুলবেন না

— আকাশ
সূত্র
display: noneট্যাব অর্ডার থেকে ইনপুট সরিয়ে ফেলবে। ব্যবহার <label>(যেমন Tympanus দ্বারা দেখানো হয়েছে) অনেক বেশী শব্দার্থিক এবং কম হল hacky। এছাড়াও, কয়েক বছর পরে এই প্রশ্নটি আবার জিজ্ঞাসা করা হয়েছিল এবং এর আরও ভাল উত্তর রয়েছে: ফাইল আপলোড বোতামের জন্য ক্রস ব্রাউজার কাস্টম স্টাইলিং ।
— ড্যান ড্যাসক্লেস্কু
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.