dostosować przycisk pliku do przesłania obrazu

Umieszczono przycisk do przesyłania plików graficznych. Chcę dostosować ten przycisk, chcę dodać więcej niż jeden plik obrazu, jaka jest logika do osiągnięcia.dostosować przycisk pliku do przesłania obrazu

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Czy to możliwe, aby dostosować tekst „no files choosen” poniżej choose button.Meanwile i mądry, aby mieć obraz z kamery przed tekstem no files choosen.

Jak to zrobić, aby poprawić moją witrynę.

Dzięki

Źródło

2013-04-18 Anonymous

podobnym stanowisku http://stackoverflow.com/questions/6461252/custom-upload-button – zavg

można ukryć poprzez wejście umieszczenie go w div, który jest height:0px i overwflow:hidden. Dodaje się przycisk lub inny element HTML, który można dowolnie kształtować. W przypadku onclick pojawi się pole wprowadzania przy użyciu JavaScript lub jQuery i kliknij go:

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button type="button" onclick="chooseFile();">choose file</button> 

<script> 
    function chooseFile() { 
     $("#fileInput").click(); 
    } 
</script>

Teraz wejście jest ukryte, ale można projektować przycisk, jak chcesz, to zawsze otworzyć wejście plików na kliknięcia.

Jeśli nie chcesz używać jQuery zastąpić tag skryptu z tego tagu skryptu:

<script> 
    function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 
</script>

Źródło

2013-04-18 10:48:50

Hi sir, sprawdziłem jsfiddle, nie pobiera pliku wejściowego. Przycisk wyboru pliku nic nie robi –

Tak, ponieważ musisz dodać linki do th e jQuery js-files. –

I musisz umieścić javascript w tagu skryptu na panelu html, ale nie wiem dlaczego ... Na wypróbuj edytor z w3schools to widnieje dobrze. –

Wypróbuj to zmanipulowane rozwiązanie. (Próbowałem go dzisiaj za jednego z mojego projektu :))

HTML

<div class="choose_file"> 
     <span>Choose File</span> 
     <input name="Select File" type="file" /> 
    </div>

CSS

.choose_file{ 
    position:relative; 
    display:inline-block;  
    border-radius:8px; 
    border:#ebebeb solid 1px; 
    width:250px; 
    padding: 4px 6px 4px 8px; 
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif; 
    color: #7f7f7f; 
    margin-top: 2px; 
    background:white 
} 
.choose_file input[type="file"]{ 
    -webkit-appearance:none; 
    position:absolute; 
    top:0; left:0; 
    opacity:0; 
}

DEMO

Źródło

2013-04-18 10:37:41 Sowmya

Nie pokazuje wybrany plik nazwa – msa7

Można dostosować je przy użyciu tylko CSS. Przejdź przez poniższy link.

HTML

<label class="btn-upload"> 
    <input type="file" name="fileupload"> 
    <button class="btn">Browse</button> 
</label> 

.btn-upload { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 
.btn-upload input[type=file] { 
    position: absolute; 
    opacity: 0; 
    z-index: 0; 
    max-width: 100%; 
    height: 100%; 
    display: block; 
} 
.btn-upload .btn{ 
    padding: 8px 20px; 
    background: #337ab7; 
    border: 1px solid #2e6da4; 
    color: #fff; 
    border: 0; 
} 
.btn-upload:hover .btn{ 
    padding: 8px 20px; 
    background: #2e6da4; 
    color: #fff; 
    border: 0; 
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

Źródło

2015-08-15 19:29:43

<body> 

    <style> 
    .image{ 
    position:relative; 
    display:inline-block;  
    width:3%; 
    padding: 0%; 
    } 
.image input[type="file"]{ 
-webkit-appearance:none; 
position:absolute; 
    top:0; left:0; 
    opacity:0; 
    } 
    </style> 

    <div class="image"> 
    <span><img src='admin/ico/fms.ico' class "image"></span> 
    <input name="image" type="file" /> 
    </div> 
</body>

Źródło

2017-02-12 15:46:40

Proszę dodać tekst _how_ to odpowiada na pytanie. – Zeta

ten kod działa lepiej, gdy chcesz użyć obrazu jako przycisku przesyłania. po prostu zamień mój obraz na twój i zadziała –

Proszę [edytuj] dodatkowe informacje w swojej odpowiedzi. Komentarze można usuwać, a ich zawartość może zostać zgubiona. – Zeta

dostosować przycisk pliku do przesłania obrazu

Odpowiedz

Powiązane problemy