Modifica "Nessun file scelto":

Ho un pulsante "Scegli file" come segue (sto usando Jade ma dovrebbe essere lo stesso di Html5):

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

Nel browser questo mostra un pulsante con accanto un testo "Nessun file scelto". Vorrei cambiare il testo "Nessun file scelto" con qualcos'altro, come "Nessun video scelto" o "Scegli un video per favore". Ho seguito i primi suggerimenti qui:

Non voglio vedere "nessun file scelto" per un campo di input file

Ma così facendo non è cambiato il testo:

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

Qualcuno può aiutarmi a capire dov'è il problema?

Sono abbastanza sicuro che non puoi cambiare le etichette predefinite sui pulsanti, sono hardcoded nei browser (ogni browser che rende i sottotitoli dei pulsanti a modo suo). Dai un'occhiata a questo articolo sullo stile dei pulsanti

Nascondere l'input con css, aggiungere un'etichetta e assegnarla al pulsante di input. l'etichetta sarà cliccabile e quando cliccata, si aprirà la finestra di dialogo del file.

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

Quindi modella l'etichetta come un pulsante, se lo desideri.

Prova questo è solo un trucco

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

Come funziona

È molto semplice. l'elemento Label utilizza il tag "for" per fare riferimento a un elemento del form tramite id. In questo caso, abbiamo usato "img" come chiave di riferimento tra di loro. Una volta fatto, ogni volta che fai clic sull'etichetta, attiva automaticamente l'evento clic dell'elemento del modulo che è l'evento clic dell'elemento del file nel nostro caso. Quindi rendiamo invisibile l'elemento file utilizzando display: none e not visible: nascosto in modo che non crei spazio vuoto.

Divertiti con la codifica

http://jsfiddle.net/ZDgRG/

Vedi link sopra. Uso css per nascondere il testo predefinito e uso un'etichetta per mostrare quello che voglio:

<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];
    }
};

Bene, non c'è modo di rimuovere questo "nessun file scelto", anche se hai un elenco di file di pre-caricamento.

La soluzione più semplice che ho trovato (e funziona su IE, FF, CR) è la seguente

1. Nascondi il tuo input e aggiungi un pulsante "file"
2. quindi chiama il pulsante 'file' e chiedigli di associare fileupload (sto usando JQuery in questo esempio)

$('.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;'>

È fatto, funziona perfettamente :)

Fred

Ma se provi a rimuovere questo suggerimento

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

Questo non funzionerà. Ecco il mio piccolo trucco per funzionare, prova il titolo con uno spazio. Funzionerà.:)

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

Qualcosa del genere potrebbe funzionare

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

HTML

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

CSS

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

Nota: Btn btn-primary è una classe di pulsanti di avvio. Tuttavia, il pulsante può sembrare storto in posizione. Spero che tu possa risolverlo tramite CSS inline.

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

utilizzando l'etichetta con il testo dell'etichetta modificato

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

aggiungi jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

Basta cambiare la larghezza dell'input. Circa 90 px

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

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

e il css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

Puoi provarlo in questo modo:

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

Per mostrare il file selezionato:

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

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

Grazie a @ sfortunato13 per aver ottenuto il nome del file selezionato

Ecco il violino funzionante:

http://jsfiddle.net/eamrmoc7/

Questo ti aiuterà a cambiare il nome di "nessun file scegli di selezionare l'immagine del profilo"

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

Userei "button" invece di "label", spero che questo aiuti qualcuno.

Questo mostrerà solo un pulsante, l'utente cliccato farà apparire il selettore di file, dopo che il file scelto, caricherà automaticamente.

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

puoi usare il seguente codice css per nascondere (nessun file scelto)

HTML

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

CSS

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

ASSICURARSI CHE IL COLORE SIA CORRISPONDENTE AL COLORE DELLO SFONDO

C'è un buon esempio (che include la convalida del tipo di file) su:

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

È fondamentalmente una versione ampliata dell'idea di Amos di usare un pulsante.

Ho provato molti dei suggerimenti sopra senza successo (ma forse sono io).

Lo sto riproponendo per eseguire una conversione di file Excel utilizzando

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