HTML, jak usunąć tekst w polu FileUpload?

Question

Kiedy mam pola wysyłania plików

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

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

automatycznie tworzy tekst „Brak pliku wybrany” i przycisk „Przeglądaj”.

Chcę zmienić lub usunąć ten tekst "Nie wybrano pliku".

Czy jest to mimo to w języku css lub Javascript?

Dzięki

Answer 1

Można ustawić wartość na wejściu image na "" przy użyciu jQuery, aby usunąć wybrany plik:

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

zobaczyć ten skrzypce:

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

UWAGA : Jest to zależne od używanej przeglądarki. Działa w FF 22 i Chrome 29.

Answer 2

Tekst jest całkowicie zależny od mechanizmu renderującego przeglądarki - zakładam, że używasz przeglądarki Chrome. Jeśli Firefox zobaczysz No file selected iw IE dostaniesz wyszarzone pole tekstowe bez wartości. Tego nie można zmienić.

Alternatywą jest użycie wtyczki (takiej jak this), która zapewnia pełną kontrolę nad stylem kontroli plików.

Answer 3

Do przeglądarki należy wyrenderować okno przesyłania plików. Każdy robi to na swój sposób. Na przykład w moim chrome widzę tekst: No file chosen. Ktoś używający przeglądarki Firefox może zobaczyć coś zupełnie innego. Nie ma bezpośredniego sposobu kontrolowania tego procesu renderowania.

Istnieje jednak kilka hacków, których można użyć. Aby uzyskać szczegółowe informacje, sprawdź this link.

Answer 4

tekst ten pokaz przez przeglądarkę inną przeglądarkę pokazać różne wiadomości

chrom pokaz = brak plików wybrane

mozilla pokaz = brak plik wybrany

i tak samo jak IE

Answer 5

Przede wszystkim.Musisz ukryć swój wkład:

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

Po drugie, trzeba utworzyć przycisk alternatywnego ze skórą:

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

i ostatnim krokiem jest stworzenie javascript skrypt Link przyciskowy alternatywną z pierwotnego :

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

Example Fiddle

Answer 6

jestem pewien nie można zmienić domyślnych etykiet na przyciskach, są one zakodowane na stałe w przeglądarkach (każda przeglądarka wyświetla nagłówki przycisków w swój własny sposób). check thisstyling article

Answer 7

HTML:

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

CSS:

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

spojrzeć tego skrzypce:

jego pracy do swoich potrzeb.

FIDDLE - DEMO

to demo jej odniesienie to: stackoverflow pytanieLINK

Od autor: ampersandre

Answer 8

Można zastosować reguły css jak ...

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(); 
}); 

Demo:

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