Standardtext im Eingabetyp ändern = "Datei"?

182

Ich möchte den Standardtext für die Schaltfläche " Choose File" ändern, wenn wir sie verwendeninput="file" .

Geben Sie hier die Bildbeschreibung ein

Wie kann ich das machen? Wie Sie im Bild sehen können, befindet sich die Schaltfläche auf der linken Seite des Textes. Wie kann ich es auf die rechte Seite des Textes setzen?

html file input default-value Harry Joy
quelle

Gibt es eine Option, um diesen Text in eine Variable zu verwandeln?

Kicaj

1

Die Antwort von ParPar hier ist wahrscheinlich das, wonach Sie suchen: stackoverflow.com/questions/1944267/… .

Aniket Suryavanshi

Mögliches Duplikat von Wie benenne ich die HTML-Schaltfläche "Durchsuchen" eines Eingabetyps = Datei um? für den Textteil, für den Stil im Allgemeinen: stackoverflow.com/questions/572768/…

Ciro Santilli 法轮功冠状病六四事件 8

Versuchen Sie diese Lösung: stackoverflow.com/a/30275263/1657573

Michael Tarimo

Mögliches Duplikat von Wie ändere ich den Schaltflächentext von <input type = "file" />?

Bae

49

Jeder Browser hat seine eigene Wiedergabe des Steuerelements. Daher können Sie weder den Text noch die Ausrichtung des Steuerelements ändern.

Es gibt einige "Arten von" Hacks, die Sie ausprobieren möchten, wenn Sie eine möchten html/.CSS Lösung eher als ein Flash oder SilverlightLösung.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Da sich die meisten Benutzer an den Browser ihrer Wahl halten und daher wahrscheinlich daran gewöhnt sind, das Steuerelement in der Standardwiedergabe zu sehen, werden sie wahrscheinlich verwirrt, wenn sie etwas anderes sehen (abhängig von den Benutzertypen, mit denen Sie es zu tun haben). .

Shiv Kumar
quelle

176

Verwenden Sie das "for"Attribut von labelfür input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

Unten finden Sie den Code zum Abrufen des Namens der hochgeladenen Datei

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>

Erweitern Sie das Snippet

Algometrix
quelle

19

display:nonekann auf INPUT verwendet werden, sodass nicht benötigter Speicherplatz nicht verwendet wird.

Meister DJon

2

Danke dir. Das hat perfekt funktioniert und war genau das, wonach ich gesucht habe.

Chris - Jr

Funktioniert gut auf Mac mit Chrome, FF und Safari. Wenn dies auch im Internet Explorer der Fall ist, ist dies die beste und einfachste Option, um die Schaltfläche zur Dateieingabe zu formatieren. Vielen Dank!

Pod

5

funktioniert gut, nur geringfügig negativ ist, dass der Benutzer den Namen der Datei nicht sehen kann, die bei der Auswahl ausgewählt wurde.

luke_mclachlan

2

@ Mike Aktualisierte den Beitrag, um Dateinamen

Algometrix

27

Dies könnte in Zukunft jemandem helfen. Sie können die Beschriftung für die Eingabe nach Ihren Wünschen gestalten und alles, was Sie möchten, darin platzieren und die Eingabe mit der Anzeige none ausblenden.

Es funktioniert perfekt auf Cordova mit iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

Erweitern Sie das Snippet

Paulo Mogollón
quelle

1

beste Lösung, die ich bisher gefunden habe! +1

Danyo

26

Ich denke, das ist was du willst:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

Erweitern Sie das Snippet

1Cr18Ni9
quelle

7

Es ist nicht möglich. Andernfalls müssen Sie möglicherweise die Silverlight- oder Flash-Upload-Steuerung verwenden.

Anuraj
quelle

1

Was ist nicht möglich? Text ändern oder Schaltfläche rechts oder beides platzieren?

Harry Joy

13

Ich habe dies positiv bewertet, weil ich es für unfair halte, diese Antwort abzulehnen. Es ist grundsätzlich unmöglich, den Text der nativen Dateieingabeschaltfläche zu ändern. Die "möglichen Lösungen" sind alle Hacks oder Workarounds.

Peter Lee

10

@PeterLee - Hacks sind Lösungen, einige folgen sogar der W3C-Spezifikation.

Derek 19 會功夫

3

So geht's:

jQuery:

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

CSS

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML Quelltext:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

Tushar Shukla
quelle

3

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Dies ist immer noch das bisher beste

oroyo segun
quelle

2

Mit Bootstrap können Sie dies wie folgt tun:

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

Rana Aalamgeer
quelle

Dieser Code druckt nicht auf die Webseite zurück, welche Datei ausgewählt wurde.

Tale852150

2

Ich habe ein Skript erstellt und es bei GitHub veröffentlicht: get selectFile.js Einfach zu verwenden, zögern Sie nicht zu klonen.

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

Thielicious
quelle

2

Update 2017:

Ich habe nachgeforscht, wie dies erreicht werden kann. Die beste Erklärung / das beste Tutorial finden Sie hier: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Ich werde hier eine Zusammenfassung schreiben, falls sie nicht mehr verfügbar ist. Sie sollten also HTML haben:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Dann verstecken Sie die Eingabe mit CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Dann stylen Sie das Etikett:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Anschließend können Sie optional JS hinzufügen, um den Namen der Datei anzuzeigen:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Aber lesen Sie einfach das Tutorial und laden Sie die Demo herunter. Es ist wirklich gut.

user3784950
quelle

1

Ich würde ein verwenden button, um Folgendes auszulösen input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Schnell und sauber.

Sony Santos
quelle

1

Sie können diesen Ansatz verwenden, er funktioniert auch, wenn viele Dateien eingegeben werden.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})

.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

Erweitern Sie das Snippet

Илья Зеленько
quelle

Ich mag diesen Ansatz, aber für mich wird der Text der ausgewählten Datei nicht angezeigt, keine Ahnung, worum es geht. Ich bin Google Chrome

N Khan

1

Das sollte funktionieren:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

Andrius
quelle

1

Hier ist, wie es mit Bootstrap gemacht wird, nur du solltest die ursprüngliche Eingabe irgendwo platzieren ... idk im Kopf und das <br> löschen, wenn du es hast, weil es nur versteckt ist und trotzdem Platz beansprucht :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

Erweitern Sie das Snippet

Leon Tanko
quelle

0

Lassen Sie mich einen Hack hinzufügen, den ich verwendet habe. Ich wollte einen Abschnitt haben, in dem Sie Dateien ziehen und ablegen können, und ich wollte, dass dieser Drag & Drop-Abschnitt zusammen mit der ursprünglichen Upload-Schaltfläche anklickbar ist.

So sah es aus, als ich fertig war (abzüglich der Drag & Drop-Fähigkeit gibt es viele Tutorials dazu).

Und dann habe ich tatsächlich eine Reihe von Blog-Posts erstellt , in denen es hauptsächlich um Schaltflächen zum Hochladen von Dateien geht.

wp-overwatch.com
quelle

0

Ok, also sehr einfache reine CSS-Methode zum Erstellen Ihrer benutzerdefinierten Eingabedatei.

Verwenden Sie Beschriftungen, aber wie Sie aus früheren Antworten wissen, ruft die Beschriftung in Firefox keine Onclick-Funktion auf. Dies kann ein Fehler sein, spielt jedoch keine Rolle.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

Sie gestalten das Etikett so, dass es so aussieht, wie Sie es möchten

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

Verstecken Sie jetzt einfach die eigentliche Eingabetaste, aber Sie können sie nicht auf einstellen visability: hidden

Machen Sie es also unsichtbar, indem Sie es einstellen opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

Wie Sie vielleicht bemerkt haben, habe ich auf meinem Etikett dieselbe Klasse wie auf meinem Eingabefeld. Das liegt daran, dass beide das gleiche Design haben sollen. Wenn Sie also auf das Etikett klicken, klicken Sie tatsächlich auf das Unsichtbare Eingabefeld.

Jadin Hornsby
quelle

0

Meine Lösung...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

Das ist nur böse: D.

bagatov88
quelle

0

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });

.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

Erweitern Sie das Snippet

Rokive
quelle

Standardtext im Eingabetyp ändern = "Datei"?

Antworten:

Ich denke, das ist was du willst: