ইনপুট টাইপ = "ফাইল" এ ডিফল্ট পাঠ্য পরিবর্তন করবেন?

182

আমি Choose Fileযখন ব্যবহার করি তখন " " বোতামের ডিফল্ট পাঠ্যটি পরিবর্তন করতে চাই input="file"।

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

কিভাবে আমি এটি করতে পারব? আপনি দেখতে পাচ্ছেন ইমেজ বোতামটি পাঠ্যের বাম দিকে রয়েছে। আমি কীভাবে এটি পাঠ্যের ডানদিকে রাখতে পারি?

html  file  input  default-value 
— হ্যারি জয়
সূত্র
এই পাঠ্যটি ভেরিয়েবলে পাওয়ার বিকল্প আছে?
— কিচাজ
1
এখানে পারপার দ্বারা উত্তর সম্ভবত আপনি যা খুঁজছেন তা হ'ল: stackoverflow.com/questions/1944267/… ।
— অনিকেত সূর্যবংশী
— সিরো Santilli郝海东冠状病六四事件法轮功
: এই সমাধান করার চেষ্টা করুন stackoverflow.com/a/30275263/1657573
— মাইকেল Tarimo
— বায়ে

উত্তর:

49

প্রতিটি ব্রাউজারের নিয়ন্ত্রণের নিজস্ব উপস্থাপনা থাকে এবং যেমন আপনি নিয়ন্ত্রণের পাঠ্য বা অভিমুখকে পরিবর্তন করতে পারবেন না।

কিছু "ধরণের" হ্যাক রয়েছে যা আপনি চাইলে চেষ্টা করতে পারেন এইচটিএমএল/CSS পরিবর্তে একটি ফ্ল্যাশ বা Silverlightসমাধান।

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

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

— শিব কুমার
সূত্র
176

ব্যবহারের "for"অ্যাট্রিবিউট labelজন্য input।

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
নীচে আপলোড করা ফাইলটির নাম আনার কোড দেওয়া আছে 

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>
স্নিপেট প্রসারিত করুন

— algometrix
সূত্র
19
display:noneINPUT এ ব্যবহার করা যেতে পারে তাই এটি প্রয়োজনীয় স্থান ব্যবহার করবে না।
— মাস্টার ডি জোন
2
ধন্যবাদ. এটি নিখুঁতভাবে কাজ করেছিল এবং আমি ঠিক যা খুঁজছিলাম।
— ক্রিস - জুন
ক্রোম, এফএফ এবং সাফারি দিয়ে ম্যাকের উপর সূক্ষ্মভাবে কাজ করে। যদি এটি IE এও করে তবে ফাইল ইনপুট বোতামটি স্টাইল করার জন্য এটি সর্বোত্তম এবং সহজ বিকল্প। ধন্যবাদ!
— পোড
5
ভাল কাজ করে, কেবল সামান্য নেতিবাচক হ'ল ব্যবহারকারী নির্বাচনের পরে যে ফাইলটি নির্বাচন করা হয়েছে তার নামটি দেখতে পাবে না।
— luke_mclachlan
2
@ মাইক ফাইল নাম আনতে পোস্ট আপডেট করেছে
— অ্যালগোমেট্রিক্স
27

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

এটি আইওএসের সাথে কর্ডোভাতে পুরোপুরি কাজ করে

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">
স্নিপেট প্রসারিত করুন

— পাওলো মোগলেন
সূত্র
1
আমি এখন পর্যন্ত খুঁজে পেয়েছি সেরা সমাধান! +1
— ড্যানিও
26

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

</html>
স্নিপেট প্রসারিত করুন

— 1Cr18Ni9
সূত্র
7

এটা সম্ভব নয়. অন্যথায় আপনাকে সিলভারলাইট বা ফ্ল্যাশ আপলোড নিয়ন্ত্রণ ব্যবহার করতে হতে পারে।

— Anuraj
সূত্র
1
কোনটি সম্ভব নয়? ডান বা উভয় উপরের পাঠ্য পরিবর্তন বা রাখার বোতাম?
— হ্যারি জয়
13
আমি এটি উত্সাহিত করেছি, কারণ আমি মনে করি যে এই উত্তরটিকে নিম্নমান দেওয়া অন্যায়। নেটিভ ফাইল ইনপুট বোতামটির পাঠ্য পরিবর্তন করা মূলত অসম্ভব। "সম্ভাব্য সমাধানগুলি" সমস্ত হ্যাক বা কর্মক্ষেত্র।
— পিটার লি
10
@PeterLee - হ্যাক হয় সমাধান, এমনকি কিছু কিছু W3C এর বৈশিষ্ট অনুসরণ করে।
— ডেরেক 朕 會
3

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

jQuery: 

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

CSS

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
— তুষার শুক্লা
সূত্র
3 
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

এটি এখনও পর্যন্ত সেরা

— ওরোও সেগুন
সূত্র
2

বুটস্ট্র্যাপ ব্যবহার করে আপনি নীচের কোডের মতো এই জিনিসটি করতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.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;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
— রানা আলমগীর
সূত্র
এই কোডটি ওয়েব পৃষ্ঠায় কোন ফাইলটি চয়ন করা হয়েছিল তা মুদ্রণ করে না।
— tale852150
2

আমি একটি স্ক্রিপ্ট তৈরি করেছি এবং এটি গিটহাব-এ প্রকাশ করেছি: সিলেক্টফিল.জেএস ব্যবহার করুন সহজ, ক্লোন করতে নির্দ্বিধায়।


এইচটিএমএল

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>


জাতীয়

var getFile = new selectFile;
getFile.targets('choose','selected');


ডেমো

jsfiddle.net/Thielicious/4oxmsy49/

— Thielicious
সূত্র
2

আপডেট 2017:

এটি কীভাবে অর্জন করা যায় সে সম্পর্কে গবেষণা করেছি। এবং সর্বোত্তম ব্যাখ্যা / টিউটোরিয়ালটি এখানে রয়েছে: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

আমি এখানে সংক্ষিপ্ত লিখব যদি এটি অনুপলব্ধ হয়ে যায়। সুতরাং আপনার এইচটিএমএল থাকা উচিত:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

তারপরে সিএসএসের সাহায্যে ইনপুটটি আড়াল করুন:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

তারপরে লেবেলটি স্টাইল করুন:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

তারপরে allyচ্ছিকভাবে আপনি ফাইলটির নাম প্রদর্শন করতে জেএস যুক্ত করতে পারেন:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

তবে সত্যই টিউটোরিয়ালটি পড়ুন এবং ডেমোটি ডাউনলোড করুন, এটি সত্যিই ভাল।

— user3784950
সূত্র
1

আমি buttonট্রিগার ট্রিগার করতে একটি ব্যবহার করব input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

দ্রুত এবং পরিষ্কার।

— সনি সান্টোস
সূত্র
1

আপনি এই পদ্ধতির ব্যবহার করতে পারেন, এটি প্রচুর পরিমাণে ফাইল ইনপুট হলেও কার্যকর হয়।

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})
.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>
স্নিপেট প্রসারিত করুন

— Зеленько Зеленько
সূত্র
আমি এই পদ্ধতির পছন্দ করি তবে আমার জন্য নির্বাচিত ফাইলের পাঠ্যটি প্রদর্শিত হচ্ছে না, সমস্যাটি সম্পর্কে কোনও ধারণা নেই। আমি গুগল ক্রোম
— এন খান
1

এই কাজ করা উচিত:

input.*className*::-webkit-file-upload-button {
  *style content..*
}
— Andrius
সূত্র
1

বুটস্ট্র্যাপ দিয়ে এটি কীভাবে সম্পন্ন হয়েছে তা এখানে কেবলমাত্র আপনার মূল ইনপুটটি অন্য কোথাও রাখা উচিত ... আইডিকে মাথায় রেখে <বিআর> মুছে ফেলতে হবে কারণ এটি কেবল লুকানো এবং যাইহোক স্থান গ্রহণ করা :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>
স্নিপেট প্রসারিত করুন

— লিওন টানকো
সূত্র
0

আমার ব্যবহৃত একটি হ্যাক যুক্ত করুন। আমি এমন একটি বিভাগ রাখতে চেয়েছিলাম যা আপনাকে ফাইলগুলি টেনে আনতে এবং ছাড়ার অনুমতি দেয় এবং আমি চাইছিলাম যে আসল আপলোড বোতামের সাথে ড্রাগ এবং ড্রপ বিভাগটি ক্লিকযোগ্য হবে।

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

এবং তারপরে আমি আসলে ব্লগ পোস্টগুলির একটি সিরিজ তৈরি করেছি যা মূলত ফাইল আপলোড বোতাম সম্পর্কে।

— wp-overwatch.com
সূত্র
0

ঠিক আছে আপনার কাস্টম ইনপুট ফাইল তৈরি করার খুব সহজ খাঁটি সিএসএস উপায়।

লেবেলগুলি ব্যবহার করুন, তবে আপনি পূর্ববর্তী উত্তরগুলি থেকে জানেন যে লেবেলটি ফায়ারফক্সে অনক্লিক ফাংশনটি চালাবে না, এটি একটি বাগ হতে পারে তবে নিম্নলিখিতগুলির সাথে কিছু আসে যায় না।

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

আপনি যা করেন তা হ'ল লেবেলটি আপনি কীভাবে চান তা স্টাইল করে

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

এখন কেবল আসল ইনপুট বোতামটি আড়াল করুন, তবে আপনি এটিতে সেট করতে পারবেন না visability: hidden

সুতরাং সেট করে অদৃশ্য করা opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

এখন আপনি যেমন লক্ষ্য করে থাকতে পারেন যে আমার ইনপুট ফিল্ডটি করার মতোই আমার লেবেলে আমার একই ক্লাস রয়েছে, কারণ আমি উভয়ই একই স্টাইলিং করতে চাই, সুতরাং যেখানে আপনি লেবেলে ক্লিক করেন, আপনি আসলে অদৃশ্যটিতে ক্লিক করছেন ইনপুট ক্ষেত্র।

— জাদিন হর্নসবি
সূত্র
0

আমার সমাধান ...

এইচটিএমএল:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

jQuery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

এটি কেবল অশুভ: ডি

— bagatov88
সূত্র
0 

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });
.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
স্নিপেট প্রসারিত করুন

— Rokive
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.