আমি কীভাবে Chrome এর কোনও ফাইল ইনপুট থেকে "কোনও ফাইল বেছে নেই" টুলটিপটি সরিয়ে ফেলতে পারি?

Question 1

আমি গুগল ক্রোমে কোনও ফাইল ইনপুট থেকে "কোনও ফাইল বাছাই করা নেই" সরঞ্জামদণ্ড সরিয়ে ফেলতে চাই (আমি দেখতে পাচ্ছি যে ফায়ারফক্সে কোনও সরঞ্জামদণ্ড প্রদর্শিত হয়নি)।

দয়া করে লক্ষ্য করুন যে আমি ইনপুট ক্ষেত্রের পাঠ্য সম্পর্কে বলছি না, তবে আপনি যখন ইনপুটটির উপর দিয়ে মাউসটি সরিয়ে আনবেন তখন উপস্থিত সরঞ্জামদ্বার সম্পর্কে।

আমি ভাগ্য ছাড়াই এটি চেষ্টা করেছি:

$('#myFileInput').attr('title', '');

Question 2

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

একটি হ্যাকি সমাধান:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})

ফিডল

Question 3

ডিফল্ট টুলটিপটি শিরোনাম বৈশিষ্ট্যটি ব্যবহার করে সম্পাদনা করা যেতে পারে

<input type='file' title="your text" />

তবে আপনি যদি এই টুলটিপটি সরিয়ে দেওয়ার চেষ্টা করেন

<input type='file' title=""/>

এটি কাজ করবে না। এটি কাজ করার জন্য আমার ছোট কৌশল এখানে একটি স্থান দিয়ে শিরোনাম চেষ্টা করুন। এটি কাজ করবে। :)

<input type='file' title=" "/>

Question 4

আমার জন্য, আমি কেবল পাঠ্যটি অদৃশ্য হওয়া এবং এখনও নেটিভ ব্রাউজার বোতামটি ব্যবহার করতে চেয়েছিলাম।

input[type='file'] {
  color: transparent;
}

আমি অপরিজ্ঞাতকৃত সমস্ত পরামর্শই পছন্দ করি তবে আমার ব্যবহারের ক্ষেত্রে ভিন্নতা ছিল, আশা করি এটি একই পরিস্থিতিতে কাউকে সহায়তা করবে।

Question 5

আমি একটি সমাধান পেয়েছি যা খুব সহজ, কেবল শিরোনাম বৈশিষ্ট্যের একটি খালি স্ট্রিং সেট করে।

<input type="file" value="" title=" " />

Question 6

আপনি ক্রোমের মতো ওয়েবকিট ব্রাউজারগুলিতে একটি স্থান এবং ফায়ারফক্স বা আইইয়ের ফাঁকা স্ট্রিং (ক্রোম 35, এফএফ 29, আইই 11, সাফারি মোবাইলে পরীক্ষিত) সহ শিরোনামটি সেট করে তোলা সরঞ্জামটি অক্ষম করতে পারেন can

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

Question 7

খুব সহজ, সিএসএস ভুলে যান ইনপুট ["টাইপ"] জিনিসটিকে লক্ষ্য করে, এটি আমার পক্ষে কার্যকর হয় না। কেন জানি না। আমি আমার HTML ট্যাগটিতে আমার সমাধান পেয়েছি

<input type="file" style="color:transparent; width:70px;"/>

সমস্যার সমাপ্তি

Question 8

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

এইচটিএমএল:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

সিএসএস:

input {
    display: none;
}

জাভাস্ক্রিপ্ট:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

আমি খুব সহজ সরল উপায়ে এই ঝাঁকুনিটি তৈরি করেছি। সিলেক্ট ফাইল বাটনে ক্লিক করলে ফাইল সিলেক্ট মেনু আসবে। তারপরে আপনি যেভাবে ইচ্ছা বোতামটি স্টাইলাইজ করতে পারবেন। মূলত, আপনাকে যা করতে হবে তা হ'ল ফাইল ইনপুটটি আড়াল করা এবং আপনি যখন অন্য বোতামটি ক্লিক করেন তখন একটি সিন্থেটিক ক্লিক ট্রিগার করতে হবে। আমি এটি 9, এফএফ, এবং ক্রোমে পরীক্ষিত করেছি এবং তারা সবাই ঠিকঠাক কাজ করে।

Question 9

এটি আমার জন্য কাজ করে (কমপক্ষে ক্রোম এবং ফায়ারফক্সে):

<input type="file" accept="image/*" title="&nbsp;"/>

Question 10

এটি একটি কৃপণ। আমি 'কোনও ফাইল বাছাই করা হয়নি' উপাদানটি নির্বাচন করার কোনও উপায় খুঁজে পাইনি তাই আমি সিডো সিলেক্টরের পরে: ব্যবহার করে একটি মুখোশ তৈরি করেছি।

আমার সমাধানটির জন্য বোতামটি স্টাইল করার জন্য নিম্নলিখিত সিউডো নির্বাচক ব্যবহার করা দরকার:

::-webkit-file-upload-button

এটি ব্যবহার করে দেখুন: http://jsfiddle.net/J8Wfx/1/

এফওয়াইআই: এটি কেবল ওয়েবকিট ব্রাউজারগুলিতে কাজ করবে।

পিএস যদি কেউ জানেন কীভাবে ওয়েবকিট সিউডো সিলেক্টরগুলি ওয়েবকিট পরিদর্শকের উপরের মত দেখতে দয়া করে আমাকে জানান

Question 11

সমস্ত ব্রাউজার জুড়ে এবং সহজ। এটা আমার জন্য এটি

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

স্নিপেট প্রসারিত করুন

Question 12

এটি অর্জনের জন্য আপনাকে নিয়ন্ত্রণটি অনেকটা কাস্টমাইজ করতে হবে।

দয়া করে গাইডটি অনুসরণ করুন : http://www.quirksmode.org/dom/inputfile.html

Question 13

দিয়ে মোড়ানো এবং অদৃশ্য করা। ক্রোম, সাফারি এবং&F এ কাজ করুন।

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

স্নিপেট প্রসারিত করুন

Question 14

অপ্রয়োজনীয় জাভাস্ক্রিপ্ট ব্যবহার করা এড়ানো ভাল। আপনি লেবেলের ট্যাগটির মতো ইনপুটটির ক্লিক লক্ষ্যকে প্রসারিত করতে সুবিধা নিতে পারেন:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

ইনপুট লুকানো থাকা সত্ত্বেও, লিঙ্কটি এখনও এটির জন্য ক্লিক টার্গেট হিসাবে কাজ করে এবং আপনি এটি চাইলেও স্টাইল করতে পারেন।

Question 15

এমনকি আপনি অস্বচ্ছতা শূন্যতে সেট করেছেন, টুলটিপটি উপস্থিত হবে। visibility:hiddenউপাদান চেষ্টা করুন। এটা আমার জন্য কাজ করছে।

Question 16

এটা আমার জন্য কাজ করে!

input[type="file"]{
  font-size: 0px;
}

তারপরে, আপনি নিজের ইনপুট ফাইল তৈরি করতে বিভিন্ন ধরণের স্টাইল যেমন width, heightবা অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন ।

Question 17

দিন -webkit-appearance:একটি যান। যাইহোক একটি চেষ্টা মূল্যবান।

http://css-infos.net/property/-webkit-appearance

আশা করি এইটি কাজ করবে :)

Question 18

সরাসরি আপনি ইনপুট [টাইপ = ফাইল] সম্পর্কে অনেক কিছু পরিবর্তন করতে পারবেন না ।

ইনপুট প্রকারের ফাইলের অস্বচ্ছতা তৈরি করুন: 0 এবং কাস্টম সিএসএসের সাথে এটির উপর একটি আপেক্ষিক উপাদান [ডিভ / স্প্যান / বোতাম] রাখার চেষ্টা করুন

এটি http://jsfiddle.net/gajjuthechamp/pvyVZ/8/ ব্যবহার করে দেখুন

Question 19

অবাক করা কেউ সম্পর্কে উল্লেখ না করে event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });

Question 20

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

Question 21

আমি এর জন্য ভাল উত্তর খুঁজছি ... এবং আমি এটি পেয়েছি:

প্রথমে 'কোনও ফাইল বেছে নেওয়া হয়নি' মুছুন

input[type="file"]{
font-size: 0px;
}

তারপরে, এইভাবে বোতামটি ব্যবহার করুন -webkit-file-upload-button:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

আশা করি এটি আপনি যা খুঁজছিলেন তা আমার জন্য কাজ করে।

Question 22

JQuery ব্যবহার করে উপরের কিছু পরামর্শের সংমিশ্রণটি আমি এখানে যা করেছি তা এখানে:

input[type='file'].unused {
  color: transparent;
}

এবং:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

এবং আপনার ফাইল ইনপুটগুলিতে ক্লাসটি "অব্যবহৃত" রাখুন। এটি সহজ এবং বেশ ভাল কাজ করে।

Question 23

আমার পক্ষে সবচেয়ে ভাল সমাধান হ'ল ইনপুট [টাইপ = "ফাইল"] একটি মোড়কে মোড়ানো, এবং কিছু জেকোয়ারি কোড যুক্ত করা:

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}

<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

স্নিপেট প্রসারিত করুন

Question 24

আমি একটি হ্যাকি সমাধান নিয়ে এসেছি যা পুরোপুরি "কোনও ফাইল বাছাই করা হয়নি" এবং সেই পাঠ্যের পরে যুক্ত হওয়া অতিরিক্ত স্থানটি সম্পূর্ণরূপে মুছে ফেলে (ক্রোমে আমি এই জাতীয় কিছু পাই: "কোনও ফাইল চয়ন করা হয়নি")।

এটি আমার পৃষ্ঠার প্রান্তিককরণটি পুরোপুরি গোলযোগ করেছিল, তাই আমি সমাধান খুঁজে পেতে সত্যিই এটির সাথে লড়াই করেছি। ইনপুট ট্যাগের শৈলীর বৈশিষ্ট্যের ভিতরে, বোতামের প্রস্থে "প্রস্থ" সেট করা পিছনের পাঠ্য এবং স্থানগুলি দূর করবে eliminate যেহেতু সমস্ত ব্রাউজারে বোতামটির প্রস্থ এক রকম নয় (উদাহরণস্বরূপ এটি ফায়ারফক্সে কিছুটা ছোট), আপনি শৈলীর রঙকে পৃষ্ঠার ব্যাকগ্রাউন্ডের মতো একই রঙে সেট করতে চাইবেন (অন্যথায় একটি পথভ্রষ্ট " না "মাধ্যমে প্রদর্শিত হতে পারে)। আমার ইনপুট ফাইল ট্যাগটি দেখতে এমন দেখাচ্ছে:

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">

Question 25

আমি জানি এটি কিছুটা হ্যাক, তবে শৈলীর শীটে রঙটি স্বচ্ছ করতে সেট করা দরকার - ইনলাইনটি এই শৈলীর মতো দেখাবে = "রঙ: স্বচ্ছ;"।