"कोई फ़ाइल नहीं चुनी गई" बदलें:

92

मेरे पास एक बटन है "फ़ाइल चुनें" इस प्रकार है (मैं जेड का उपयोग कर रहा हूं लेकिन यह एचटीएमएल 5 के समान होना चाहिए):

 input(type='file', name='videoFile')

ब्राउज़र में इसके आगे एक टेक्स्ट के साथ एक बटन दिखाई देता है "कोई फ़ाइल नहीं चुनी गई"। मैं "कुछ भी नहीं चुना" पाठ को "कुछ वीडियो नहीं चुना" या "एक वीडियो कृपया चुनें" जैसे कुछ भी बदलना चाहेगा। मैंने यहाँ पहले सुझावों का पालन किया:

मैं फ़ाइल इनपुट फ़ील्ड के लिए 'कोई फ़ाइल नहीं चुनी गई' देखना नहीं चाहता

लेकिन ऐसा करने से पाठ में परिवर्तन नहीं हुआ:

 input(type='file', name='videoFile', title = "Choose a video please")

क्या कोई मेरी मदद कर सकता है कि समस्या कहां है?

html  button  file-upload  pug 
— FranXh
स्रोत
जवाब यहां ढूंढें stackoverflow.com/questions/12035400/…
— महमूद फ़रहट
1
@ ममौदफारहट मैं इसे हटाना नहीं चाहता, मैं पाठ को बदलना चाहता हूं
— फ्रैंक्स
क्या आप पाठ को हटा नहीं सकते हैं, और उसके बगल में प्लेसहोल्डर लेबल लगा सकते हैं?
— रोजर लिप्सकॉम्ब
किसी अन्य पोस्ट में इसका बहुत ही सटीक उत्तर है। stackoverflow.com/a/21842275/3653494
— P-Bagels
यह बहुत संभव है: इस त्वरित समाधान की जांच करें - इसमें अन्य सामान शामिल हैं, बस CSS के नीचे स्क्रॉल करें: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7
— dargaet

जवाबों:

18

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

— जेरेमी थिली
स्रोत
6
यह बटन पर लेबल नहीं है, इसके बगल में "कोई फ़ाइल नहीं चुनी गई" है। जब मैं एक फ़ाइल चुनता हूं, तो यह फ़ाइल से किसी फाइल में नहीं बदलता है। इसलिए मेरा मानना ​​है कि यह परिवर्तनशील होना चाहिए।
— FranXh
@JeremyThille क्योंकि लोग लोग हैं।
— एमएन
220

सीएसएस के साथ इनपुट छिपाएं, एक लेबल जोड़ें और इसे इनपुट बटन पर असाइन करें। लेबल क्लिक करने योग्य होगा और जब क्लिक किया जाता है, तो यह फ़ाइल संवाद को आग देगा।

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

यदि आप चाहें तो लेबल को एक बटन के रूप में स्टाइल करें।

— SKManX
स्रोत
1
यह IE9 में भी काम करता है, जहाँ आप इसे छिपा नहीं सकते file inputऔर इसे जावास्क्रिप्ट से क्लिक करें। धन्यवाद!
— huysentruitw
1
यह भी खूब रही। हैकिंग लालित्य। इसे प्यार करना।
— बेन
3
महान समाधान, यह स्वीकृत उत्तर होना चाहिए।
— गुणा करें
1
महान समाधान, यह भी क्षेत्र को अनुकूलित करने के लिए एक आसान तरीका के लिए अनुमति देता है
— SAFAD
8
दिलचस्प HTML समाधान, लेकिन प्रयोज्य के लिए बुरा। उपयोगकर्ता हमेशा फ़ाइल का चयन करने के बाद भी "फ़ाइल का चयन करें" या उसके बराबर होगा।
— Cthulhu
26

यह सिर्फ एक चाल की कोशिश करो

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

यह काम किस प्रकार करता है

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

कोडिंग का आनंद लें

— ओडिन
स्रोत
2
आप यह जवाब बेहतर तरीके से समझा सकते हैं कि यह कैसे काम करता है।
— dorukayhan
ऐसा लगता है कि जब आप ऐसा करते हैं तो फ़ाइलें खींचना काम नहीं करता है।
— fonZ
16

http://jsfiddle.net/ZDgRG/

ऊपर लिंक देखें मैं डिफ़ॉल्ट पाठ को छिपाने के लिए css का उपयोग करता हूं और जो मैं चाहता हूं उसे दिखाने के लिए एक लेबल का उपयोग करता हूं:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

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

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};
— टॉमी स्टीमल
स्रोत
13

सही है, इस 'नो फाइल चॉइस' को हटाने का कोई तरीका नहीं है, भले ही आपके पास पूर्व-अपलोड फ़ाइलों की सूची हो।

सबसे सरल समाधान जो मैंने पाया है (और IE, FF, CR पर काम करता है) निम्नलिखित है

  1. अपना इनपुट छिपाएँ और एक 'फाइल' बटन जोड़ें
  2. फिर 'फाइल' बटन पर कॉल करें और उसे फाइलअप लोड करने के लिए कहें (मैं इस उदाहरण में JQuery का उपयोग कर रहा हूं)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>
स्निपेट का विस्तार करें

यह हो गया, पूरी तरह से काम करता है :)

फ्रेड

— फ़्रेडरिक
स्रोत
7 

$(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">
स्निपेट का विस्तार करें

— इफियानी चुक्वु
स्रोत
यह बहुत प्रभावी ढंग से काम कर रहा है यह फ़ाइल को इनपुट के पास छिपा देगा।
— हमेशा सीखने वाला
6

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

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

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

<input type='file' title=" "/>
— साइमन
स्रोत
मैंने क्रोम और सभी ब्राउज़रों में परीक्षण किया। यह ठीक काम कर रहा है। क्या आप इसका परीक्षण कर सकते हैं और सत्यापित कर सकते हैं।
— सिमोन २
4
क्रोम, सफारी, फ़ायरफ़ॉक्स में फिर से परीक्षण किया गया। यह काम नहीं करता।
— AdamInTheOculus
मैं क्रोम संस्करण 56.0.2924.87 में जांच करता हूं यह पूरी तरह से ठीक काम कर रहा है। आप किस संस्करण का उपयोग कर रहे हैं? @PantsMagee
— simon
यह सिर्फ आप पर सेट पाठ के साथ टूलटिप कहते titleविशेषता, के रूप में मैं देख रहा हूँ
— फ्योदोर
3

एचटीएमएल

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

सीएसएस

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

नोट: बीटीएन बीटीएन-प्राथमिक बूटस्ट्रैप बटन का एक वर्ग है। हालाँकि बटन स्थिति में ऊब सकता है। आशा है कि आप इसे इनलाइन css द्वारा ठीक कर सकते हैं।

— नईम माविया सिद्दीकी
स्रोत
3 
 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }


$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});
.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>
स्निपेट का विस्तार करें

— राज चव्हाण
स्रोत
मैं बटन के नीचे प्रदर्शित करने के लिए "चयन कंपनी लोगो" पाठ कैसे प्राप्त करूंगा और दाईं ओर नहीं ??
— एलेक्स
3

लेबल पाठ के साथ लेबल का उपयोग करना बदल गया

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

jquery जोड़ें

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>
— केल्विन कांटारिया
स्रोत
2

बस इनपुट की चौड़ाई बदलें। लगभग 90px

<input type="file" style="width: 90px" />

— nwillo
स्रोत
1
यह सरल और ठीक काम कर रहा है। बस चौड़ाई 100px है; :)
— सचिन शाह
1 
<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

और सीएसएस

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}
— इर कैलिफोर्निया
स्रोत
1
इनपुट [प्रकार = "फ़ाइल"] {रंग: पारदर्शी; पृष्ठभूमि-रंग: # F89406; बॉर्डर: 2px ठोस # 34495e; चौड़ाई: 100%; ऊंचाई: 36 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; }
— इरिया
1

आप इसे इस तरह आज़मा सकते हैं:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <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, ''))
    $('.customform-control').hide();
})

चयनित फ़ाइल नाम पाने के लिए @ अनलकी 13 का धन्यवाद

यहाँ काम कर रहा है बेला:

http://jsfiddle.net/eamrmoc7/

— kittu
स्रोत
0

यह आपको "प्रोफाइल फ़ाइल का चयन करने के लिए कोई फ़ाइल नहीं चुनें" के लिए नाम बदलने में मदद करेगा

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>
बटन चला गया है।
— डायन्शेंग
यह मेरे लिए ठीक काम किया। बटन चला गया था लेकिन लेबल ओपन फाइल ओपन डायलॉग पर क्लिक करने और आप बटन की तरह दिखने के लिए लेबल करने के लिए स्टाइल कर सकते हैं। इसने कष्टप्रद "नो फाइल चोजेन" पाठ से छुटकारा पा लिया।
— NoBullMan
0

मैं "लेबल" के बजाय "बटन" का उपयोग करूंगा, आशा है कि यह किसी की मदद करेगा।

यह सिर्फ एक बटन प्रदर्शित करेगा, क्लिक किया गया उपयोगकर्ता फ़ाइल चयनकर्ता को पॉपअप करेगा, फ़ाइल के चुने जाने के बाद, स्वचालित रूप से अपलोड होगा।

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
— अमोस
स्रोत
0

आप छिपाने के लिए निम्नलिखित सीएसएस कोड का उपयोग कर सकते हैं (कोई फ़ाइल नहीं चुनी गई)

एचटीएमएल

<input type="file" name="page_logo" id="page_logo">

सीएसएस

input[type="file"]:after {color: #fff}

यह सुनिश्चित करें कि रंग बैकग्राउंड रंग का निर्माण कर रहा है

— मिड्ज़ एलवेकिल
स्रोत
-1

एक अच्छा उदाहरण है (जिसमें फ़ाइल प्रकार सत्यापन शामिल है):

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

यह मूल रूप से एक बटन का उपयोग करने के विचार का एक फ्लेश-आउट संस्करण अमोस है।

मैंने ऊपर दिए गए कई सुझावों को बिना किसी सफलता के आज़माया (लेकिन शायद यही मैं)।

मैं एक एक्सेल फ़ाइल रूपांतरण का उपयोग करने के लिए इसे फिर से प्रस्तुत कर रहा हूं 

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
— DLyons
स्रोत
तो यह नीचे क्यों किया गया था? शायद इसलिए कि एक पूरी तरह से असंबंधित पोस्ट में मैंने सुझाव दिया था कि घुटने से झटका करना आसान था, लेकिन बहुत कम करने में आसान है?
— DLYons
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.