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
— Ciro Santilli 法轮功 冠状 病 六四 事件 8
Versuchen Sie diese Lösung: stackoverflow.com/a/30275263/1657573
— Michael Tarimo
— Bae

Antworten:

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/popper.js@1.16.0/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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.