it-swarm.com.de

Wie kann ich "Eingabedatei" mit CSS3 / Javascript formatieren?

Ich möchte <input type="file" /> Mit CSS3 stylen.

Alternativ möchte ich, dass der Benutzer auf ein div drückt (das ich stylen werde). Dadurch wird das Durchsuchen-Fenster geöffnet.

Ist das nur mit HTML, CSS3 und Javascript/jQuery möglich?

35
Misha Moroshko

Ich habe dieses grobe Beispiel, mit dem Sie sich vielleicht ein Bild machen möchten ...

html

<div id="file">Chose file</div>
<input type="file" name="file" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#file {
    display:none;
}​

jQuery

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    $this = $(this);
    $('#file').text($this.val());
})

$('#file').click(function(){
    fileInput.click();
}).show();

Demo

Für den Fall, dass Sie nicht mehr weiterkommen möchten

51
Reigel

Nachdem ich die Idee von Reigels und diese überprüft hatte, schrieb ich diese einfache Lösung für das übliche Problem, ein type="file" Eingabefeld (getestet auf Firefox, Safari und Chrome).

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>

Dann können Sie natürlich die "Datei" div stylen, wie Sie möchten.

Und wenn du ein type="text" Eingabe anstelle eines Div, ändern Sie einfach innerHTML für value:

<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>

Hier ist meine ursprüngliche Antwort mit jQuery:

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>
19
Sophivorus

So geht's mit HTML, CSS und Javascript (ohne Frameworks):

Die Idee ist, das <input type='file'> Button ausgeblendet und Dummy benutzen <div>, das Sie als Datei-Upload-Schaltfläche formatieren. Mit einem Klick auf dieses <div>, wir nennen das versteckte <input type='file'>.

Demo:

// comments inline
document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = document.getElementById('fileUpload').value;
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);
body{
  font-family: Arial;
}

#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the dummy upload button */
  background: yellow;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  color: red;
}
<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div>  <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->
6
Rahul Desai

Auch dafür habe ich einen eigenen Stil entworfen. Hör zu

JS Fiddle Demo - Benutzerdefinierte Eingabe type = "file"

[~ # ~] html [~ # ~]

<input type="file" id="test">
<div class="button-group"> 
<a href="#" id="browse" class="button primary">Browse</a>
<a href="#" id="save" class="button">Save</a>
<a href="#" id="clear" class="button danger">Clear</a>
</div>
<input type="text" id="testfile"></input>

[~ # ~] CSS [~ # ~]

body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:Ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}

JQuery

$("#browse").click(function () {
$("#test").click();
})

$("#save").click(function () {
alert('Run a save function');
})

$("#clear").click(function () {
$('#testfile').val('');
})

$('#test').change(function () {
$('#testfile').val($(this).val());
})

Fügen Sie auch die Registerkarte "Externe Ressourcen" hinzu:

https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css

6
andibra

Das gefälschte Div wird nicht benötigt! Nein, es gibt kein zusätzliches HTML. Die Verwendung von nur CSS ist möglich.

Der beste Weg ist, das Pseudoelement: after oder: before als Element zu verwenden, um die de-Eingabe zu überschreiben. Gestalten Sie dann das Pseudoelement nach Ihren Wünschen. Ich empfehle Ihnen, als allgemeinen Stil für alle Eingabedateien wie folgt vorzugehen:

input[type="file"]:before {
  content: 'Browse';
  background: #FFF;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #E0E0E0;
  top: -1px;
  line-height: 35px;
  color: #B6B6B6;
  padding-left: 5px;
  display: block;
}

-> DEMO

4
Despertaweb

Neben Reigel

hier ist die Implementierung einfacher. Sie können diese Lösung auch für mehrere Dateieingabefelder verwenden. Hoffe das hilft einigen Leuten ;-)

HTML (einzelne Eingabe)

<input type="file" name="file" />

HTML (Mehrfacheingabe)

<!-- div is important to separate correctly or work with jQuery's .closest() -->
<div>
  <input type="file" name="file[]" />
</div>

<div>
  <input type="file" name="file[]" />
</div>

<div>
  <input type="file" name="file[]" />
</div>

JavaScript

// make all input fields with type 'file' invisible
$(':file').css({
  'visibility': 'hidden',
  'display': 'none'
});

// add a textbox after *each* file input
$(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />');

// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {
    $(this).parent().find(':file').click();
}).show();

// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
    $(this).parent().find('.fileChooserText').val($(this).val());
});
4
Patrick Hillert

Ich bin heute auf dasselbe Problem gestoßen, aber es scheint, als gäbe es eine einfache Möglichkeit, eigene Stile zu erstellen: Blenden Sie die Eingabe aus und formatieren Sie das zugehörige Etikett:

<div class="upload">
  <label for="my-input"> Upload stuff </label>
  <input type="file" id="my-input" name="files[]" />
</div>

CSS:

.upload input{
  display: none;
}

.upload label{
  background: DarkSlateBlue;
  color: white;
  padding: 5px 10px;
}

Funktioniert in den neuesten Versionen von Chrome, Firefox und IE 10. Hat andere nicht getestet

2
nice ass

Die Antwort von Reigel vermittelt zwar die Idee, hat aber keinen wirklichen Stil. Ich bin vor kurzem auf dieses Problem gestoßen, und trotz der Fülle von Antworten auf Stack Overflow schien keines wirklich zu der Rechnung zu passen. Am Ende habe ich das angepasst, um eine einfache und elegante Lösung zu erhalten.

Ich habe dies auch auf Firefox, IE (11, 10 & 9), Chrome und Opera, iPad und einigen Android Geräten getestet.

Hier ist der JSFiddle-Link -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

Hoffe das hilft!!!

2
Satwik Nadkarny

Hier ist ein Beispiel, das ich verwende und das jQuery verwendet, das ich gegen Firefox 11 und Chrome 18 sowie IE9 getestet habe. Es ist also ziemlich kompatibel mit den Browsern in meinem Buch, obwohl ich arbeite nur mit diesen dreien.

HTML

Hier ist eine grundlegende "anpassbare" HTML-Struktur.

<span>
    File to Upload<br />
    <label class="smallInput" style="float:left;">
        <input type="file" name="file" class="smallInput" />
    </label>
    <input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" />
</span>

CSS

Hier ist ein Beispiel meines CSS

label.smallInput {
    background:url(images/bg_s_input.gif) no-repeat;
    width:168px;
}

JavaScript

Das ist der schwere Lifter.

/* File upload magic form?? */
$("input.smallInput[type=file]").each(function(i){
    var id      = "__d_file_upload_"+i;
    var d_wrap  = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'});

    $(this).wrap(d_wrap).bind('change blur focus keyup click',function(){
        $("#"+id+" input[type=text]").val($(this).val());
    }).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput');

    obj = $(this);

    $("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();}));
    obj.closest('span').children('input.upload[type=button]').bind('click',function(e){
        obj.trigger('click');
        $(this).blur();
    });
});
/* ************************ */

Erläuterung

Das HTML ist ziemlich einfach, nur ein einfaches Element, ich füge die Schaltfläche hinzu, damit sie unabhängig vom Rest benannt werden kann, sicher, dass dies in JavaScript enthalten sein könnte, aber einfach ausgedrückt, ich bin ein bisschen faul. Der Code sucht nach allen Eingaben mit einer Klasse von smallInput, die den Dateityp haben. Auf diese Weise können Sie die Standard-HTML- und Fallback-Formularstruktur in definieren Fall ein Browser entscheidet, ein Schmerz zu sein.

Diese Methode verwendet nur JavaScript, um die Zustellung sicherzustellen. Sie ändert kein Browserverhalten in Bezug auf die Dateieingabe.

Sie können HTML und JavaScript so ändern, dass sie sehr robust sind. Dieser Code reicht für mein aktuelles Projekt aus, sodass ich bezweifle, dass ich Änderungen daran vornehmen werde.

Vorbehalte

  • Verschiedene Browser behandeln den Wert der Dateieingabe unterschiedlich, was in chrome auf Windows-Computern zu c:\fakeroot\führt.
  • Verwendet anonyme Funktionen (mangels eines besseren Wortes). Wenn Sie zu viele Dateieingaben haben, kann dies dazu führen, dass sich der Browser bei der Verarbeitung langsam verhält.
2
Destreyf

Dies ist meine Methode, wenn ich deinen Standpunkt verstehe

[~ # ~] html [~ # ~]

<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
1
SystemDZ

Hier ist eine Lösung mit einem Textfeld, in das der Benutzer den (relativen) Pfadnamen der Dateikopie auf dem Server eingibt (falls autorisiert) und einer Schaltfläche zum Senden, um das lokale System nach einer Datei zu durchsuchen und das Formular zu senden:

<form enctype="multipart/form-data" action="" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<p><input type="file" name="upload_file" id="upload_file" size="40"/></p>
<p><input type="text" id="upload_filename" name="upload_filename" size="30" maxlength="100" value="<?php echo htmlspecialchars($filename, ENT_COMPAT, 'UTF-8'); ?>"/>
<input type="submit" class="submit submit_upload" id="upload_upload" name="upload_upload" value="Upload"/></p>
</form>

Der Scripting-Teil blendet die Dateieingabe aus, klickt darauf, wenn der Benutzer auf die Schaltfläche zum Senden klickt, und sendet das Formular, wenn der Benutzer eine Datei abgerufen hat. Wenn der Benutzer versucht, eine Datei hochzuladen, ohne einen Dateinamen einzugeben, wird der Fokus zuerst in das Textfeld für den Dateinamen verschoben.

<script type="text/javascript">
var file=$('#upload_file');
var filename=$('#upload_filename');
var upload=$('#upload_upload');

file.hide().change(function() {if (file.val()) {upload.unbind('click').click();}});

upload.click(function(event) {event.preventDefault();if (!filename.val()) {filename.focus();} else {file.click();}});
</script>

Für ein perfektes Ergebnis drücken Sie einfach die Senden-Taste:

.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
1
frasq