एचटीएमएल FileUpload फ़ील्ड में टेक्स्ट को कैसे निकालें?

Question

जब मैं एक फाइल अपलोड क्षेत्र है,

<form action="" method="post" enctype="multipart/form-data"> 
    <input id="image" type="file" name="image"> 
</form> 

http://jsfiddle.net/jakeaustin5574/6DzgU/

यह स्वचालित रूप से एक पाठ "कोई फाइल नहीं चुनी" बनाता है और एक "ब्राउज़ करें" बटन।

मैं इसे "कोई फ़ाइल नहीं चुना गया" टेक्स्ट बदलना या निकालना चाहता हूं।

क्या सीएसएस या जावास्क्रिप्ट में इसे प्राप्त करने के लिए वैसे भी है?

धन्यवाद

Answer 1

आपको "" jQuery का उपयोग कर चयनित फ़ाइल को हटाने के लिए image इनपुट का मान सेट कर सकते हैं:

http://jsfiddle.net/nfvR9/1/

नोट:

$("#image").val("") 

इस बेला देखें : यह इस्तेमाल ब्राउज़र पर निर्भर है। यह एफएफ 22 और क्रोम 2 9 में काम करता है।

Answer 2

No file chosen टेक्स्ट ब्राउज़र प्रस्तुतीकरण इंजन पर पूरी तरह से निर्भर है - मुझे लगता है कि आप क्रोम का उपयोग करते हैं। यदि फ़ायरफ़ॉक्स आपको No file selected और आईई में दिखाई देगा तो आपको बिना किसी मूल्य के एक ग्रेड आउट टेक्स्टबॉक्स मिलेगा। इसे बदला नहीं जा सकता है।

विकल्प प्लगइन का उपयोग करना है (जैसे this) जो आपको फ़ाइल नियंत्रण की स्टाइल पर पूरा नियंत्रण देता है।

Answer 3

यह फ़ाइल अपलोड बॉक्स को प्रस्तुत करने के लिए ब्राउज़र पर निर्भर है। प्रत्येक व्यक्ति इसे अपने तरीके से करता है। उदाहरण के लिए, मेरे क्रोम में मैं No file chosen टेक्स्ट देख सकता हूं। फ़ायरफ़ॉक्स का उपयोग करने वाला कोई भी पूरी तरह से कुछ और देख सकता है। इस प्रतिपादन प्रक्रिया को नियंत्रित करने का कोई सीधा तरीका नहीं है।

हालांकि, कुछ हैक्स का उपयोग किया जा सकता है। विवरण के लिए, this link देखें।

Answer 4

ब्राउज़र अलग ब्राउज़र शो अलग संदेश द्वारा इस पाठ शो

क्रोम शो = कोई फाइल चुना

mozilla शो = कोई फाइल यानी

Answer 5

सबसे पहले के रूप में

और एक ही चयन किया।आप अपने इनपुट को छिपाने के लिए है: दूसरे

input#image{position:fixed;top:-100px;} 

, आप अपनी त्वचा के साथ वैकल्पिक बटन बनाने के लिए है:

<form action="" method="post" enctype="multipart/form-data"> 
    <input id="image" type="file" name="image"> 
    <button id="image_alt">Select image</button> 
</form> 

और अंतिम चरण एक जावास्क्रिप्ट स्क्रिप्ट जो मूल एक के साथ विकल्प बटन लिंक बनाने के लिए है :

document.getElementById('image_alt').addEventListener('click',function(){ 
    document.getElementById('image').click(); 
}); 

Example Fiddle

Answer 6

मुझे यकीन है आप बटन पर डिफ़ॉल्ट लेबल नहीं बदल सकते हैं, वे ब्राउज़र में हार्ड-कोड किए गए हैं (प्रत्येक ब्राउजर बटन कैप्शन को अपना रास्ता प्रस्तुत करता है)। check thisstyling article

Answer 7

HTML:

<div class="inputWrapper"> 
    <input class="fileInput" type="file" name="file1"/> 
</div> 

सीएसएस:

.inputWrapper { 
    height: 32px; 
    width: 64px; 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; 
    /*Using a background color, but you can use a background image to represent a button*/ 
    background-color: #DDF; 
} 
.fileInput { 
    cursor: pointer; 
    height: 100%; 
    position:absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
    /*This makes the button huge. If you want a bigger button, increase the font size*/ 
    font-size:50px; 
    /*Opacity settings for all browsers*/ 
    opacity: 0; 
    -moz-opacity: 0; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) 
} 

इस बेला की एक बार देख ले:

अपनी अपनी आवश्यकताओं के लिए काम कर रहे।

FIDDLE - DEMO

इस डेमो अपनी इस के संदर्भ: stackoverflow सवालLINK

लेखक से: ampersandre

Answer 8

आप की तरह सीएसएस नियम लागू होते हैं कर सकते हैं ...

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

Answer 9

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;"> 
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/> 
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" /> 
</div> 
<a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a> 

JQuery:

function getFileName() { 
    var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, ''); 
    $("#filename").text(varfile); 
} 
$("#fileupload").on('change', function() { 
     getFileName(); 
}); 

डेमो:

http://jsfiddle.net/m44fp2yd/

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