<ইনপুট টাইপ = "ফাইল" /> এর বোতামের পাঠ্যটি কীভাবে পরিবর্তন করবেন?


257
<input type="file" value="Browse" name="avatar" id="id_avatar" />

আমি valueএটিকে সংশোধন করার চেষ্টা করেছি , কিন্তু এটি কাজ করছে না। কীভাবে বোতামের পাঠ্যকে কাস্টমাইজ করবেন?


আপনি কি ফাইলের নাম বা বোতামের পাঠ্য সম্পর্কে কথা বলছেন?
আর্টিলিয়াস

উত্তর:


153

ফর্মের ফাইল ক্ষেত্রগুলিকে স্টাইল করতে ব্যবহৃত বুটস্ট্র্যাপ ফাইলস্টাইল ব্যবহার করুন । এটি টুইটার বুটস্ট্র্যাপ নামে একটি 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.">

আমার পক্ষে কাজ করছে বলে মনে হয় না। এটি এখনও ব্রোসারের ডিফল্ট বোতামগুলি দেখায়। এছাড়াও, github.com/markusslima/bootstrap-filestyle.git এ ডেমোটি কোনওভাবেই কাজ করে না - সমস্ত উদাহরণ ডিফল্ট বোতামগুলি দেখায়। আমি কিছু অনুপস্থিত করছি?
ইয়া

7
@ টনি উহ .... আপনি কী ভাবেন যে বুটস্ট্র্যাপ নীচে "ভ্যাক্সি <img /> হ্যাক" ব্যবহার করছে না? :-)
এন্ডজ

@ ইয়া আপনি কি ব্রাউজার এবং এটির সংস্করণ বলতে পারবেন? লিনাক্সের ক্রোম সংস্করণে 43.0.2357.130 (-৪-বিট) পরীক্ষিত এবং সমস্ত উদাহরণ পুরোপুরি কার্যকর হয়।
ফার্নান্দো কোশ

20
এ জাতীয় ছোট সমস্যাটিতে একটি জাভাস্ক্রিপ্ট লাইব্রেরি (একটি প্লাগইন সহ!) নিক্ষেপ করা একটি অনুচিত ওভারকিল।
এমকামা

3
Downvoted। এটি এমনকি কোনও উত্তর নয়, কেবলমাত্র একটি কর্মক্ষেত্রের জন্য অতিরিক্ত লাইব্রেরি প্রয়োজন। উত্তরটির ব্রাউজারগুলির জন্য রেন্ডারিং আচরণটি পরিবর্তন করার উদ্দেশ্য করা উচিত।
wdetac

108

পরিবর্তে আপনি একটি চিত্র রাখতে পারেন এবং এটি এর মতো করুন:

এইচটিএমএল:

<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


5
এটি একটি চতুর সমাধান। আপনি <বাটন> উপাদান দিয়ে এটি করতে পারেন না?
কোড কমান্ডার

1
@ কোড কমান্ডার-ধন্যবাদ, এবং হ্যাঁ, আপনি নিজের পছন্দসই প্রতিটি উপাদান দিয়ে এটি করতে পারেন, তবে সবচেয়ে সাধারণ <চিত্র> উপাদান। "ফাইল ইনপুট" এর বোতাম + পাঠ্য ক্ষেত্রটি থেকে কেবল মুক্তি পান ...
পার্পার

2
উপরের ব্যবহার করে যে কারও কাছে কেবল একটি শীর্ষস্থানীয়, কিছু মোবাইল ব্রাউজার প্রোগ্রামিংভাবে ফাইল ইনপুট ক্লিকগুলি ট্রিগার করে না। বিশেষত, গ্যালাক্সি এস III এর জন্য অ্যান্ড্রয়েড 4
শাটগুলি

আমি <input type="file" এসপ নেট গ্রিডভিউ সারিটির অভ্যন্তরে ব্যবহার করছি , যার সারিগুলি গতিশীলভাবে যুক্ত করা যেতে পারে .. সুতরাং কোনও চিত্রে ক্লিক করার সময় প্রাসঙ্গিক ইনপুট ক্লিক ট্রিগার (একই সারিটির) কল করা মাথায় আসল ব্যথা হবে! : /
sohaiby

আপনার সমাধান কাজ করে না। আপনি প্রলয় সীমানা, মার্জিন, প্যাডিং এবং ব্যাকগ্রাউন্ড-রঙ সেট করেননি বা অন্যথায় এটি সুস্পষ্ট হবে
ইয়ান বেলেভান্স

88

ফাইল ইনপুট লুকান। একটি ক্লিক ইভেন্ট ক্যাপচার করতে একটি নতুন ইনপুট তৈরি করুন এবং এটি লুকানো ইনপুটটিতে ফরোয়ার্ড করুন:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

আইটি 7 ​​মোডের সাথে একটি এইচটিএ ফাইলের মধ্যে ছোঁড়াতে আমাকে ;শেষের দিকে সরিয়ে ফেলতে হয়েছিল ।
এটেক

দুর্দান্ত, টেক্সটের দুটি শব্দ পরিবর্তনের জন্য বুটস্ট্র্যাপ অন্তর্ভুক্ত করতে চান না, তবে ফাইল-ইনপুটটি গতিশীলভাবে তৈরি করা থাকলে আপনি কীভাবে এটি করবেন?
এস্পারিজম

@ স্পিরিজমটি ডিওএম চালিত করতে জাভাস্ক্রিপ্ট ব্যবহার করে, এটির স্টাইলটি সেট করে লুকিয়ে রাখুন এবং এর আগে ব্যবহার করুন) এবং নতুন ইনপুট উপাদান যুক্ত করুন?
মুশিপিস

3
@ মুশিপিস এটি সহজতম উপায়। সিএসএস নিয়ে খেলতে চেষ্টা করেছি তবে এই সমাধানটি আরও দ্রুত এবং সহজ। ধন্যবাদ
ম্যারা

2
এটি আমার জন্যও সহজতম উপায় ছিল! বিজোড়ের "ব্রাউজ" ফাইল-বোতামটি প্রদর্শন করার বিষয়ে চিন্তা না করেই এটি আমাকে অন্য ফর্ম-বোতাম বিকল্পগুলির একটি সেট হিসাবে 'মক' ফাইল বোতামটি স্টাইল করার অনুমতি দেয়।
হ্যারি মান্থেখিস

47

"আপলোড ফাইল ..." পাঠ্যটি ব্রাউজারের দ্বারা পূর্বনির্ধারিত এবং পরিবর্তন করা যায় না। এটি ঘুরে দেখার একমাত্র উপায় হ'ল ফ্ল্যাশ- বা জাভা ভিত্তিক আপলোড উপাদান যেমন সুইফআপলোড ব্যবহার করা


3
আপনি এটি প্রমাণ করতে পারেন যে এটি পরিবর্তন করা যায় না?
ব্যবহারকারী 198729

বা ব্রাউজারগুলির সোর্স কোডগুলি ব্রাউজ করে কমপক্ষে ওপেন সোর্সগুলির জন্য।
পেক্কা

এটি উত্তরের মাধ্যমে (অন্য প্রশ্নের কাছে, "মানের বিষয়বস্তু কেন, 'VALUE =" সি: \ someFile.txt "' টাইপ ফাইলের ইনপুট ক্ষেত্রের জন্য 'TYPE =" ফাইল ") উপেক্ষা করা যেতে পারে could ব্রাউজার? "): স্ট্যাকওভারফ্লো
পিটার মর্টেনসেন

23

সমস্ত ব্রাউজারে নিখুঁতভাবে কাজ করে আশা করি এটি আপনার জন্যও কার্যকর হবে।

এইচটিএমএল:
<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">

সাফারিতে কাজ করে, যদিও
কুল্লব

এটি আমার এফএফ ৪১.০.২. এ পুরোপুরি পুরোপুরি কাজ করছে browser আপনি ব্রাউজারের সামঞ্জস্যতা ইস্যুটি চালিয়ে যাচ্ছেন দয়া করে সমস্যাটি হ্রাস করতে সিএসএস বক্স মডেলটি দেখুন।
কোড ব্ল্যাক

1
সমস্যাটি সম্ভবত এফএফ ওয়েবকিট নয়, গেকোর উপর নির্মিত। (আমার সেরা অনুমান)
কুল্লব

2
<লেবেল আইডি = "অ্যাডবটন" = "আপলোড" শৈলী = "ব্যাকগ্রাউন্ড-রঙ: # 000; রঙ: # এমএফএফ; প্যাডিং: 4 পিক্স; সীমানা-ব্যাসার্ধ: 4px; ফন্ট-পরিবার: মনোস্পেস;" > কিছু ফাইল চয়ন করুন </ লেবেল> <ইনপুট আইডি = "আপলোড" প্রকার = "ফাইল" একাধিক = "একাধিক" নাম = "_ ফটো" গ্রহণ = "চিত্র / *" শৈলী = "দৃশ্যমানতা: লুকানো">
কোড কালো

4
ঠিক আছে ধন্যবাদ! পরীক্ষা করে দেখুন এই JSFiddle । যদি আপনি তার সাথে আপনার উত্তরটি সম্পাদনা করেন তবে আমার মনে হয় এটি
উত্সাহের

10

এই একটি jQuery এক ইনপুট ফাইল উপাদান বাটনের লেখার পরিবর্তন করতে প্লাগ হয়।

এইচটিএমএল উদাহরণ:

<input type="file" id="choose-file" />

জেএস উদাহরণ:

$('#choose-file').inputFileText({
    text: 'Select File'
});

ফলাফল:

প্লাগইন ফলাফল



8

কেবল

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


আমি এখানে কী তৈরি করেছি তা দেখার চেষ্টা করুন jsfiddle.net
কেন কার্লো

ধন্যবাদ, আমি যা চেয়েছিলাম ঠিক
তেমন

7

আমি মনে করি এটি আপনি যা চান:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 

3

সম্পাদনা করুন : আমি এখন যে মন্তব্যগুলির দ্বারা বোতামের পাঠ্যটি সম্পর্কে জিজ্ঞাসা করছি তা দিয়ে দেখছি, ফাইলের পথটি নয়। আমার খারাপ। আমি যদি নীচে আমার মূল উত্তরটি ছেড়ে দিই তবে এই প্রশ্নে যদি কেউ হোঁচট খায় তবে আমি এটি মূলত যেভাবে ব্যাখ্যা করেছি।

২ য় সম্পাদনা : আমি এই উত্তরটি মুছে ফেলেছিলাম কারণ আমি সিদ্ধান্ত নিয়েছি যে আমি প্রশ্নটি ভুল বুঝি এবং আমার উত্তর প্রাসঙ্গিক নয়। তবে, অন্য উত্তরের মন্তব্যগুলি ইঙ্গিত দেয় যে লোকেরা এখনও এই উত্তর দেখতে চায় তাই আমি এটিকে মুছে ফেলছি।

আমার মূল উত্তর (আমি ভাবলাম যে ওপি বাটনটির পাঠ্য নয়, পথ সম্পর্কে জিজ্ঞাসা করছে):

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


3

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

2

কেবল সিএসএস এবং বুটস্ট্র্যাপ শ্রেণি

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

1
  1. তার আগে <input type="file">, একটি চিত্র যুক্ত করুন এবং <input style="position:absolute">এটির স্থানটি দখল করবে<input type="file">
  2. ফাইলের উপাদানটিতে নিম্নলিখিত সিএসএস ব্যবহার করুন

    position:relative;  
    opacity:0;  
    z-index:99;

0

যদি আপনি রেল ব্যবহার করে এবং সমস্যাটি প্রয়োগ করতে সমস্যা হয় তবে আমি @ ফার্নান্দো কোশ পোস্ট করা মূল উত্তর থেকে কিছু টিপস যুক্ত করতে চাই

  • ফাইল জিপ ডাউনলোড করুন এবং ফাইল বুটস্ট্র্যাপ-ফাইলস্টাইল.min.js অনুলিপি করুন ফোল্ডার অ্যাপ / সম্পদ / জাভাস্ক্রিপ্ট /
  • আপনার application.js খুলুন এবং নীচে এই লাইনটি যুক্ত করুন

    // = বুটস্ট্র্যাপ-ফাইলস্টাইল.মিন প্রয়োজন

  • আপনার কফি খুলুন এবং এই লাইন যুক্ত করুন

    $ (": ফাইল")। ফাইলস্টাইল ({বাটননাম: "বিটিএন-প্রাথমিক", বোতামের পূর্বে: সত্য, বোতাম পাঠ: "আপনার পাঠ্য এখানে", আইকন: মিথ্যা});


0

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

.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" />


0

খাঁটি এইচটিএমএল এবং জাভাস্ক্রিপ্ট সহ ফাইল প্রকারের সাথে একটি ইনপুটটির পাঠ্যকে "পরিবর্তন" করার একটি উপায় এখানে রয়েছে:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

0

আমার জন্য এটি বুটস্ট্র্যাপ-ফাইল স্টাইলের সাথে কাস্টম পাঠ্যে কাজ করে না । এটি বোতামের সজ্জাতে সহায়তা করে তবে এর অদ্ভুত পরিবর্তনটি টেক্সট করুন, CSS এর সাথে কুস্তিতে নামার আগে আমি নিম্নলিখিতটি চেষ্টা করি:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

বুটস্ট্র্যাপ-ফাইলস্টাইলটি উপাদানটি বোতামটেক্স্ট নামে শ্রেণীর সাথে স্প্যান হিসাবে রেন্ডার করে, তাই যখন ডকুমেন্ট লোডটি কেবল পাঠ্য পরিবর্তন করে। সহজ ডান এবং এটি অবশ্যই সমস্ত ব্রাউজারে কাজ করে।

চিয়ার্স


0

আমি আমার প্রকল্পের জন্য এটি এটি করেছি:

.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;">


-1

এটি একটি বিকল্প সমাধান যা আপনার পক্ষে সহায়ক হতে পারে। এটি ডিফল্টের ব্যাকগ্রাউন্ড-রঙের সাথে মিশ্রণ করে বোতামের বাইরে উপস্থিত পাঠ্যটিকে আড়াল করে। তারপরে আপনি ডিভকে আপনার পছন্দ মতো একটি শিরোনাম দিতে পারেন।

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

ক্রোম 39-তে আমি আপলোড ইমেজ পাঠ্য এবং <ইনপুট> বোতাম উভয়ই দেখছি। আপনি পোস্ট করার পরে ফাইলের ইনপুটগুলিতে ক্রোমের হ্যান্ডলিং পরিবর্তন হয়েছে?
এরিকপি

@ ইয়ান-বেলাভ্যান্স আপনি কি করছেন? যদি আপনি মনে করেন যে কোনও উত্তর ভুল বা সহায়ক নয় তবে ডাউনওয়েট করুন, তবে কোনওভাবেই এটিকে অবজ্ঞা করবেন না!
কাইদো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.