wake-up-neo.com

Standardtext in Eingabetyp = "Datei" ändern?

Ich möchte den Standardtext auf der Schaltfläche "Choose File" ändern, wenn wir input="file" verwenden.

enter image description here

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

134
Harry Joy

Jeder Browser verfügt über eine eigene Wiedergabe des Steuerelements. Daher können Sie weder den Text noch die Ausrichtung des Steuerelements ändern.

Es gibt einige "Art" von Hacks, die Sie ausprobieren können, wenn Sie eine html / css - Lösung anstatt einer Flash - oder silverlight - Lösung möchten.

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

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

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

42
Shiv Kumar

Verwenden Sie das "for"-Attribut von label für input

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

$("#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>

116
algometrix

Dies könnte in der Zukunft jemandem helfen, Sie können die Beschriftung für die Eingabe nach Ihren Wünschen gestalten und alles, was Sie möchten, darin einfügen und die Eingabe ohne Anzeige 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">

18
Paulo Mogollón

Ich denke, das ist es 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>

13
1Cr18Ni9

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

7
Anuraj

So kannst du es machen:

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>
3
Tushar Shukla

Update 2017:

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

Ich schreibe hier eine Zusammenfassung für den Fall, dass sie nicht 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 die Eingabe mit CSS ausblenden:

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

Dann gestalten Sie das Label:

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

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

2
user3784950

Mit Bootstrap können Sie den folgenden Code ausführen.

<!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>
2
Rana Aalamgeer

Ich habe ein Skript erstellt und bei GitHub veröffentlicht: get selectFile.js Einfach zu benutzen, fühle mich frei 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/

2
Thielicious

Ich würde eine button verwenden, um die input auszulösen:

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

Schnell und sauber.

1
Sony Santos

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

Verwenden Sie Labels, aber wie Sie aus früheren Antworten wissen, ruft Label in Firefox nicht die Funktion onclick Auf. Es kann ein Fehler sein, spielt jedoch bei den folgenden Problemen keine Rolle.

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

Was Sie tun, ist das Etikett so zu gestalten, dass es wie gewünscht aussieht

    .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%;
    }

jetzt blenden Sie einfach die eigentliche Eingabeschaltfläche aus, aber Sie können sie nicht auf visability: hidden setzen.

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

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 die gleiche Klasse wie mein Eingabefeld. Das heißt, ich möchte, dass beide das gleiche Styling haben. Wenn Sie also auf das Etikett klicken, klicken Sie auf das Unsichtbare Eingabefeld.

0
Jadin Hornsby

Das sollte funktionieren:

input. klassenname :: - webkit-file-upload-button { Stil Inhalt .. }

0
Andrius

Sie können diesen Ansatz verwenden, es 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>

Lass mich einen Hack hinzufügen, den ich benutzt habe. Ich wollte einen Abschnitt haben, in dem Sie Dateien ziehen und ablegen konnten, und ich wollte, dass dieser Drag & Drop-Bereich zusammen mit der ursprünglichen Schaltfläche zum Hochladen angeklickt werden kann. 

So sah es aus Als ich fertig war (abzüglich der Drag & Drop-Fähigkeit, gibt es viele Tutorials, wie man das macht).

Und dann habe ich tatsächlich eine Reihe von Blogbeiträgen erstellt, die hauptsächlich über die Schaltfläche zum Hochladen von Dateien bestehen.

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

Dies ist bis jetzt immer noch das Beste

0
oroyo segun