मैं Chrome में फ़ाइल इनपुट से "चुना हुआ फ़ाइल नहीं" टूलटिप कैसे निकाल सकता हूं?

Question

मैं Google Chrome में फ़ाइल इनपुट से "कोई फ़ाइल नहीं चुनी गई" टूलटिप निकालना चाहता हूं (मैं देखता हूं कि फ़ायरफ़ॉक्स में कोई टूलटिप प्रदर्शित नहीं हुई है)।

कृपया ध्यान दें कि मैं इनपुट फ़ील्ड के अंदर पाठ के बारे में नहीं, बल्कि टूलटिप के बारे में बात कर रहा हूं, जब आप माउस को इनपुट पर ले जाते हैं।

मैंने इसे बिना किसी भाग्य के आज़माया है:

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

Comments

हो सकता है कि विशेषता मान में स्थान जोड़ने का प्रयास करें: attr ('शीर्षक', '')। टूलटिप अभी भी दिखाई देगा, लेकिन खाली सामग्री के साथ।

— cryss

मेरा उत्तर जांचें। 'शीर्षक' का उपयोग करें: 'स्पेस'

— सिमोन

शायद यह जवाब आपकी मदद कर सकता है। stackoverflow.com/a/25825731/1323461

— LCB

Answer 1

यह वेबकिट ब्राउज़र का एक मूल भाग है और आप इसे हटा नहीं सकते हैं। आपको फाइल इनपुट्स को कवर करने या छुपाने जैसे हैकी समाधान के बारे में सोचना चाहिए ।

एक घिनौना समाधान:

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, ''))
})    

बेला

Comments

वाह, यह बुरी खबर है ... क्या कोई दस्तावेज उपलब्ध है जो इस मुद्दे का उल्लेख करता है (मेरा मतलब है, ते तथ्य यह है कि आप उस टूलटिप को हटा नहीं सकते हैं)?

— जर्मन लैटरे

टूलटिप तब भी प्रदर्शित होता है, जब आप इनपुट के निचले किनारे पर होवर करते हैं। "अपारदर्शिता: 0" समस्या को हल नहीं करता है।

— वेबर

@Webars मैंने हैकरी का उल्लेख किया है, बुलेट-प्रूफ का नहीं।

— अपरिभाषित

@ निस्संतोजेन तो इसे बेहतर बनाएं, यह सिर्फ एक उदाहरण था।

— अपरिभाषित

सबसे साफ हैक मैंने देखा है। उम्मीद है कि यह IE9 +, FF, Safari जैसे सभी ब्राउज़रों में काम करेगा। क्रोम में पूरी तरह से चलता है।

— पवन पिल्लई

Answer 2

शीर्षक विशेषता का उपयोग करके डिफ़ॉल्ट टूलटिप को संपादित किया जा सकता है

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

लेकिन अगर आप इस टूलटिप को हटाने की कोशिश करते हैं

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

यह काम नहीं करेगा। यहाँ यह काम करने के लिए मेरी छोटी सी चाल है, एक स्थान के साथ शीर्षक का प्रयास करें। यह काम करेगा।:)

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

Comments

क्रोमियम संस्करण 44.0.2403.89 में काम करता है और संस्करण 40.0.3 में इसका कोई दुष्प्रभाव नहीं है! महान इनपुट @simon

— रॉबर्ट सिएमर

लेकिन आपका कस्टम शीर्षक फ़ाइलों को चुनने के बाद भी दिखाई देगा।

— मोनिका

मैंने इस समाधान को एक बाध्यकारी इंजन (aureliajs, कोणीय, ...) के साथ एकीकृत किया है और यह उचित संदेश और उपयोगकर्ता को दिखाने के लिए गणना करने के लिए बहुत ही ठीक काम करता है।

— ConductedClever

Answer 3

मेरे लिए, मैं बस चाहता था कि पाठ अदृश्य हो और फिर भी देशी ब्राउज़र बटन का उपयोग करें।

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

मुझे सभी अपरिभाषित सुझाव पसंद हैं लेकिन मेरे पास एक अलग उपयोग का मामला था, आशा है कि यह उसी स्थिति में किसी की मदद करता है।

Comments

मेरे लिए "चुनी हुई कोई फ़ाइल नहीं" छीन ली।

— एमईएम

यह मेरे लिए "चुना कोई फ़ाइल नहीं" से छुटकारा मिल जाता है

— ब्रायन

@ एमईएम, आप किस ब्राउज़र पर हैं? यह मेरे लिए क्रोम पर काम कर रहा है (कुछ संशोधनों के साथ क्योंकि मैं नहीं चाहता कि पाठ गायब हो जाए)।

— ब्रिलियनड

यह 2020 के लिए सबसे अच्छा जवाब है। 0 को अपारदर्शिता स्थापित करने से पूरा तत्व अदृश्य हो जाता है।

— १६:

Answer 4

मुझे एक समाधान मिला जो बहुत आसान है, बस शीर्षक विशेषता में एक खाली स्ट्रिंग सेट करें।

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

Comments

आपको बस शीर्षक बनाना चाहिए = "" अन्यथा शीर्षक = "" एक खाली टूलटिप दिखाता है।

— ufukomer

Answer 5

आप टूलकिट को क्रोम जैसे वेबकिट ब्राउजरों पर एक स्पेस और फ़ायरफ़ॉक्स या IE पर रिक्त स्ट्रिंग (क्रोम 35, एफएफ 29, आईई 11, सफारी मोबाइल पर परीक्षण) के साथ अक्षम कर सकते हैं।

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

Comments

संपादन के लिए धन्यवाद। मैं wedkitURL के बिना एक समाधान खोजना चाहते हैं क्योंकि यह पदावनत है।

— jbier

यह उत्तर केवल एक ही है कि मेरे लिए काम किया है, बस में उपलब्ध कराई गई एक करने के लिए ब्राउज़र का पता लगाने की जगह stackoverflow.com/questions/9847580/...

— yvesmancera

Answer 6

बहुत आसान है, सीएसएस इनपुट ["टाइप"] को लक्षित करना भूल जाते हैं, यह मेरे लिए काम नहीं करता है। मुझे पता नहीं क्यों। मुझे अपने HTML टैग में अपना समाधान मिला

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

समस्या का अंत

Answer 7

यहाँ सभी उत्तर पूरी तरह से अधूरे हैं, या अन्यथा पूरी तरह से गलत हैं।

एचटीएमएल:

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

सीएसएस:

input {
    display: none;
}

जावास्क्रिप्ट:

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

http://jsfiddle.net/odfe34n8/

मैंने इस फिडेल को सबसे सरल तरीके से बनाया। सेलेक्ट फाइल बटन पर क्लिक करने से फाइल सेलेक्ट मेनू आएगा। फिर आप किसी भी तरह से बटन को स्टाइल कर सकते थे। मूल रूप से, आपको बस इतना करना होगा कि फ़ाइल इनपुट को छिपाएं, और जब आप किसी अन्य बटन पर क्लिक करते हैं तो उस पर सिंथेटिक क्लिक को ट्रिगर करें। मैंने IE 9, FF और Chrome पर यह परीक्षण किया और वे सभी ठीक काम करते हैं।

Answer 8

यह मेरे लिए काम करता है (कम से कम क्रोम और फ़ायरफ़ॉक्स में):

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

Comments

हालांकि, शीर्षक का बॉक्स (गैर-ब्रेकिंग स्पेस कैरेक्टर वाला) अभी भी प्रकट होता है।

— 2540625

शीर्षक बॉक्स क्रोम पर एक खाली स्ट्रिंग के साथ मेरे लिए दिखाई देता है।

— एशडी

Answer 9

यह पेचीदा है। मुझे 'no फाइल सेलेक्टेड' एलिमेंट को चुनने का तरीका नहीं मिला, इसलिए मैंने इसका उपयोग करके एक मास्क बनाया: छद्म चयनकर्ता के बाद।

मेरे समाधान में बटन को स्टाइल करने के लिए निम्नलिखित छद्म चयनकर्ता के उपयोग की भी आवश्यकता है:

::-webkit-file-upload-button

इसे आज़माएं: http://jsfiddle.net/J8Wfx/1/

FYI करें: यह केवल वेबकिट ब्राउज़र में काम करेगा।

पुनश्च अगर किसी को पता है कि वेबकिट छद्म चयनकर्ताओं को कैसे देखना है जैसे ऊपर एक वेबकिट निरीक्षक कृपया मुझे बताएं

Comments

मेरे लिए क्रोम पर काम नहीं किया (

— फिडेल

Answer 10

सभी ब्राउज़रों और सरल के पार। यह मेरे लिए किया था

$(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">

Comments

यह एक महान समाधान है! इसने मेरे लिए बहुत काम किया क्योंकि फ़ाइल अपलोड करने के बाद, फ़ाइल का नाम दिखाई देगा। अच्छा और धन्यवाद!

यह टूलटिप कैसे निकाल रहा है? मैं अभी भी इसे देखता हूं

— द फ़ूल

Answer 11

इसे प्राप्त करने के लिए आपको नियंत्रण को काफी अनुकूलित करना होगा।

कृपया इस गाइड का पालन करें: http://www.quirksmode.org/dom/inputfile.html

Comments

मैं यह पोस्ट करने जा रहा था, प्लस कि एक JQuery प्लगइन है जो इसी तरह की एक चीज करता है filamentgroup.com/lab/…

— Dreen

@RyanMcDonough, मैं आपके द्वारा दिए गए लिंक में टूलटिप को छिपाने के बारे में कोई सुझाव नहीं देख सकता, क्या मुझे कुछ याद आ रहा है?

— जर्मन लैटरे

क्षमा याचना, मुझे स्पष्ट करना चाहिए। जैसा कि उस टूलटिप को छिपाने का कोई तरीका नहीं है, आपको एक समान परिणाम प्राप्त करने के लिए इनपुट फॉर्म नियंत्रण को अनुकूलित करना होगा। एक मायने में मूल नियंत्रण को हैक करना।

— रायन मैकडोनो

@, मैं आपके द्वारा दिए गए लिंक में "कोई फ़ाइल नहीं चुनी गई" टूलटिप देख सकता हूं, यह समस्या को हल नहीं करता है ...

— जर्मन लैटर्रे

Answer 12

साथ लपेटें और अदृश्य करें। Chrome, Safari && FF में काम करें।

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

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

Answer 13

अनावश्यक जावास्क्रिप्ट का उपयोग करने से बचना बेहतर है। आप इनपुट टैग का लाभ उठा सकते हैं ताकि इनपुट के क्लिक लक्ष्य का विस्तार किया जा सके:

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

हालांकि इनपुट छिपा हुआ है, फिर भी लिंक इसके लिए एक क्लिक लक्ष्य के रूप में काम करता है, और आप इसे अपनी इच्छानुसार स्टाइल कर सकते हैं।

Answer 14

यहां तक ​​कि आप अस्पष्टता को शून्य पर सेट करते हैं, टूलटिप दिखाई देगा। visibility:hiddenतत्व पर प्रयास करें । यह मेरे लिए काम कर रहा है।

Answer 15

दे -webkit-appearance:खो। वैसे भी एक कोशिश करो।

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

उम्मीद है की वो मदद करदे :)

Answer 16

सीधे आप इनपुट [प्रकार = फ़ाइल] के बारे में बहुत कुछ संशोधित नहीं कर सकते ।

इनपुट प्रकार फ़ाइल अपारदर्शिता बनाएं: 0 और कस्टम सीएसएस के साथ इस पर एक रिश्तेदार तत्व [div / span / बटन] लगाने का प्रयास करें

यह कोशिश करें http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Answer 17

इससे मेरा काम बनता है!

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

फिर, आप अपनी खुद की इनपुट फ़ाइल बनाने के लिए विभिन्न प्रकार की शैलियों जैसे कि width, heightया अन्य गुणों का उपयोग कर सकते हैं ।

Answer 18

किसी के बारे में उल्लेख नहीं देखकर आश्चर्य event.preventDefault()

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

Answer 19

आप yor एलिमेंट के लिए एक चौड़ाई सेट कर सकते हैं जो केवल बटन दिखाएगा और "चुनी गई फ़ाइल नहीं" छिपाएगा।

Answer 20

मैं इसके लिए अच्छे उत्तर की तलाश में हूं ... और मुझे यह मिला:

पहले 'कोई फ़ाइल नहीं चुनी गई' हटाएं

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

फिर -webkit-file-upload-buttonइस तरह से बटन पर काम करें :

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

आशा है कि यह वही है जो आप खोज रहे थे, यह मेरे लिए काम करता है।

Answer 21

ऊपर दिए गए कुछ सुझावों को जोड़ते हुए, jQuery का उपयोग करते हुए, यहाँ मैंने किया है:

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

तथा:

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

और अपनी फ़ाइल इनपुट पर "अप्रयुक्त" वर्ग डालें। यह सरल है और बहुत अच्छी तरह से काम करता है।

Answer 22

मेरे लिए सबसे अच्छा समाधान, एक आवरण में इनपुट [प्रकार = "फ़ाइल"] लपेटना है, और कुछ jquery कोड जोड़ना है:

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

Answer 23

मैं एक घिनौने समाधान के साथ आया था जो पूरी तरह से "कोई फ़ाइल नहीं चुनी गई" को हटा देता है और उस पाठ के बाद जो अतिरिक्त स्थान जोड़ा जाता है (क्रोम में मुझे कुछ मिलता है जैसे: "कोई फ़ाइल नहीं चुनी गई")।

यह मेरे पृष्ठ संरेखण को पूरी तरह से गड़बड़ कर रहा था, इसलिए मैंने इसका हल खोजने के लिए वास्तव में संघर्ष किया। इनपुट टैग की शैली विशेषता के अंदर, बटन की चौड़ाई के लिए "चौड़ाई" सेट करना अनुगामी पाठ और रिक्त स्थान को समाप्त कर देगा। चूंकि बटन की चौड़ाई सभी ब्राउज़रों में समान नहीं है (यह फ़ायरफ़ॉक्स में थोड़ा छोटा है, उदाहरण के लिए), आप शैली के रंग को पेज की पृष्ठभूमि के समान रंग में सेट करना चाहेंगे (अन्यथा एक आवारा) कोई "के माध्यम से नहीं दिखा सकता है"। मेरा इनपुट फ़ाइल टैग इस तरह दिखता है:

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

Comments

मैंने अब तक नीचे दिए गए समाधान को नहीं देखा था, क्योंकि यह अब तक पृष्ठ के नीचे था। किसी भी मामले में, मैं अपने समाधान को हटाने नहीं जा रहा हूं, क्योंकि उम्मीद है कि शैली रंग जानकारी उपयोगी होगी (यह मेरे लिए फ़ायरफ़ॉक्स समस्या को हल करता है)।

— टोनीलुइगीज

Answer 24

मुझे पता है कि यह एक हैक का एक सा है, लेकिन मुझे सभी की आवश्यकता थी कि स्टाइल शीट में पारदर्शी को रंग सेट किया जाए - इनलाइन इस शैली की तरह दिखाई देगी = "रंग: पारदर्शी;"।