wake-up-neo.com

Schaltfläche zum Hochladen von Dateien für das Twitter-Bootstrap-Formularelement

Warum gibt es für Twitter-Bootstrap keine Schaltfläche zum Hochladen von Dateielementen? Es wäre schön, wenn die blaue Hauptschaltfläche für die Hochladeschaltfläche implementiert würde. Kann der Upload-Button überhaupt mit CSS verfeinert werden? (scheint ein natives Browserelement zu sein, das nicht manipuliert werden kann) 

cssformstwitter-bootstrapinput-type-file
533
jkushner

Hier ist eine Lösung für Bootstrap 3 und 4.

Um ein funktionales Dateieingabesteuerelement zu erstellen, das wie eine Schaltfläche aussieht, benötigen Sie nur HTML:

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

Dies funktioniert in allen modernen Browsern, einschließlich IE9 +. Wenn Sie auch Unterstützung für alte IE benötigen, verwenden Sie bitte den unten gezeigten alten Ansatz.

Diese Technik basiert auf dem HTML5-Attribut hidden. Bootstrap 4 verwendet das folgende CSS, um diese Funktion in nicht unterstützenden Browsern unterzubringen. Sie müssen möglicherweise hinzufügen, wenn Sie Bootstrap 3 verwenden.

[hidden] {
  display: none !important;
}

Legacy-Ansatz für alte IE

Wenn Sie Unterstützung für IE8 und darunter benötigen, verwenden Sie folgendes HTML/CSS:

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

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

Beachten Sie, dass die alte IE die Dateieingabe nicht auslöst, wenn Sie auf einen <label> klicken. Die CSS "Bloat" -Datei führt ein paar Dinge aus, um das zu umgehen:

  • Macht die Dateieingabe um die gesamte Breite/Höhe des umgebenden <span>
  • Macht die Dateieingabe unsichtbar

Feedback & zusätzliches Lesen

Ich habe mehr Details zu dieser Methode gepostet sowie Beispiele, wie dem Benutzer angezeigt wird, welche/wie viele Dateien ausgewählt werden:

http://www.abeautifulsite.net/peitschen-datei-inputs-into-shape-with-bootstrap-3/

913
claviska

Ich bin überrascht, dass das <label>-Element nicht erwähnt wurde.

Lösung: 

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" style="display:none;">
    Button Text Here
</label>

Keine Notwendigkeit für JS oder funky css ...

Lösung für die Angabe des Dateinamens: 

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" style="display:none" 
    onchange="$('#upload-file-info').html(this.files[0].name)">
    Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>

Die obige Lösung erfordert jQuery.

354
Kirill Fuchs

Da kein zusätzliches Plugin erforderlich ist, funktioniert diese Bootstrap-Lösung hervorragend für mich:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

demo: 

http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2)

enter image description here

http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)

enter image description here

130
codefreak

Es ist in Jasnys Gabel von Bootstrap enthalten.

Mit kann eine einfache Upload-Schaltfläche erstellt werden

<span class="btn btn-file">Upload<input type="file" /></span>

Mit dem Fileupload-Plugin können Sie erweiterte Widgets erstellen. Schauen Sie sich an http://jasny.github.io/bootstrap/javascript/#fileinput

87
Jasny - Arnold Daniels

Schaltflächen zum Hochladen sind schwierig zu gestalten, da sie die Eingabe und nicht die Schaltfläche formatieren.

sie können diesen Trick jedoch verwenden:

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

Zusammenfassung:

  1. Nehmen Sie einen normalen <input type="file"> und fügen Sie ihn mit position: relative in ein Element ein. 

  2. Fügen Sie diesem übergeordneten Element einen normalen <input> und ein Bild hinzu, die die richtigen Stile haben. Positionieren Sie diese Elemente absolut so, dass sie dieselbe Position wie der <input type="file"> einnehmen. 

  3. Setzen Sie den Z-Index von <input type="file"> auf 2, so dass er über dem formatierten Eingang/Bild liegt. 

  4. Stellen Sie schließlich die Deckkraft von <input type="file"> auf 0 ein. Der <input type="file"> wird nun effektiv unsichtbar und die Eingabe-/Bildformate werden angezeigt, Sie können jedoch auf die Schaltfläche "Durchsuchen" klicken. Wenn sich die Schaltfläche oben auf dem Bild befindet, scheint der Benutzer auf das Bild zu klicken und das normale Dateiauswahlfenster anzuzeigen. (Beachten Sie, dass Sie Sichtbarkeit nicht verwenden können: ausgeblendet, da ein wirklich unsichtbares Element nicht anklickbar ist und wir das Anklicken benötigen, um anklickbar zu bleiben.)

65
baptme

Funktioniert bei mir: 

Aktualisieren

jQuery-Plugin-Stil :

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <input class="Nice_file_field" type="file" data-label="Choose Document">
//     <script> $(".Nice_file_field").niceFileField(); </script>
//
(function( $ ) {
  $.fn.niceFileField = function() {
    this.each(function(index, file_field) {
      file_field = $(file_field);
      var label = file_field.attr("data-label") || "Choose File";

      file_field.css({"display": "none"});

      Nice_file_block_text  = '<div class="input-group Nice_file_block">';
      Nice_file_block_text += '  <input type="text" class="form-control">';
      Nice_file_block_text += '  <span class="input-group-btn">';
      Nice_file_block_text += '   <button class="btn btn-default Nice_file_field_button" type="button">' + label + '</button>';
      Nice_file_block_text += '  </span>';
      Nice_file_block_text += '</div>';

      file_field.after(Nice_file_block_text);

      var Nice_file_field_button = file_field.parent().find(".Nice_file_field_button");
      var Nice_file_block_element = file_field.parent().find(".Nice_file_block");

      Nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
      file_field.change( function(){
        Nice_file_block_element.find("input").val(file_field.val());
      });
    });
  };
})( jQuery );
21
fguillen

Vereinfachte Antwort mit Teilen aus anderen Antworten, hauptsächlich user2309766 und dotcomsuperstar.

Eigenschaften:

  • Verwendet das Bootstrap-Button-Addon für Button und Feld.
  • Nur eine Eingabe; Mehrere Eingaben würden von einem Formular abgerufen.
  • Keine zusätzliche CSS außer "display: none;" um die Dateieingabe auszublenden.
  • Die sichtbare Schaltfläche löst ein Klickereignis für die Eingabe versteckter Dateien aus.
  • split zum Entfernen des Dateipfads verwendet Regex und Trennzeichen '\' und '/'.

Code:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
  </span>
  <span class="form-control"></span>
</div>

14
mindriot

Mit einigen Anregungen aus anderen Beiträgen oben, hier ist eine vollständige Lösung, die etwas wie ein Formularsteuerfeld mit einem Eingabegruppen-Addon für ein reines Dateieingabe-Widget kombiniert, das einen Link zur aktuellen Datei enthält.

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */
.input-file .input-group-addon { border: 0px; padding: 0px; }
.input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 }
.input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="input-group input-file">
  <div class="form-control">
    <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a>
  </div>
  <span class="input-group-addon">
    <a class='btn btn-primary' href='javascript:;'>
      Browse
      <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());">
    </a>
  </span>
</div>

11
dotcomly

Das funktioniert perfekt für mich

<span>
    <input  type="file" 
            style="visibility:hidden; width: 1px;" 
            id='${multipartFilePath}' name='${multipartFilePath}'  
            onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
    <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
    &nbsp;
    <span  class="badge badge-important" ></span>
</span>
8
MoBKK

Bitte check out Twitter Bootstrap File Input . Es verwendet eine sehr einfache Lösung, fügen Sie einfach eine Javascript-Datei hinzu und fügen Sie folgenden Code ein:

$('input[type=file]').bootstrapFileInput();
7
monsur.hoq

Eine einfache Lösung mit akzeptablem Ergebnis:

<input type="file" class="form-control">

Und der Stil:

input[type=file].form-control {
    height: auto;
}
4
Salar

dies ist der beste Datei-Upload-Stil, den ich mag:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

demo und weitere Styles erhalten Sie unter:

http://www.jasny.net/bootstrap/javascript/#fileinput

wenn Sie dies jedoch verwenden, sollten Sie Twitter-Bootstrap durch jasny-Bootstrap-Dateien ersetzen.

grüße.

3
navins

Ich habe eine benutzerdefinierte Upload-Schaltfläche erstellt, um nur Bilder zu akzeptieren, die je nach Anforderung geändert werden können.

Hoffe das hilft!! :)

(Gebrauchtes Bootstrap-Framework)

Codepen-Link

HTML

<center>
 <br />
 <br />
 <span class="head">Upload Button Re-Imagined</span>
 <br />
 <br />
 <div class="fileUpload blue-btn btn width100">
   <span>Upload your Organizations logo</span>
   <input type="file" class="uploadlogo" />
 </div>
</center>

CSS

 .head {
   font-size: 25px;
   font-weight: 200;
 }

 .blue-btn:hover,
 .blue-btn:active,
 .blue-btn:focus,
 .blue-btn {
   background: transparent;
   border: solid 1px #27a9e0;
   border-radius: 3px;
   color: #27a9e0;
   font-size: 16px;
   margin-bottom: 20px;
   outline: none !important;
   padding: 10px 20px;
 }

 .fileUpload {
   position: relative;
   overflow: hidden;
   height: 43px;
   margin-top: 0;
 }

 .fileUpload input.uploadlogo {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
   font-size: 20px;
   cursor: pointer;
   opacity: 0;
   filter: alpha(opacity=0);
   width: 100%;
   height: 42px;
 }


 /*Chrome fix*/

 input::-webkit-file-upload-button {
   cursor: pointer !important;
 }

JS

// You can modify the upload files to pdf's, docs etc
//Currently it will upload only images
$(document).ready(function($) {

  // Upload btn
  $(".uploadlogo").change(function() {
    readURL(this);
  });

  function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) {
      var path = $('.uploadlogo').val();
      var filename = path.replace(/^.*\\/, "");
      $('.fileUpload span').html('Uploaded logo : ' + filename);
      // console.log(filename);
    } else {
      $(".uploadlogo").val("");
      $('.fileUpload span').html('Only Images Are Allowed!');
    }
  }
});
3
Ashwin

Ich benutze http://gregpike.net/demos/bootstrap-file-input/demo.html :

$('input[type=file]').bootstrapFileInput();

oder

$('.file-inputs').bootstrapFileInput();
2
Andrey

Lösung für mehrere Uploads

Ich habe zwei vorangegangene Antworten angepasst, um mehrere Uploads hinzuzufügen. Auf diese Weise zeigt das Etikett den Dateinamen, wenn nur einer ausgewählt ist, oder x files im umgekehrten Fall.

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
        onchange="$('#upload-file-info').html(
            (this.files.length > 1) ? this.files.length + ' files' : this.files[0].name)">                     
    Files&hellip;
</label>
<span class='label label-info' id="upload-file-info"></span>

 enter image description here

Es kann auch angewendet werden, um den Schaltflächentext und die Klasse zu ändern.

<label class="btn btn-primary" for="multfile">
    <input id="multfile" type="file" multiple="multiple" style="display:none"
        onchange="$('#multfile-label').html(
            (this.files.length == 1) ? this.files[0].name : this.files.length + ' files');
            $(this).parent().addClass('btn-success')">
    <span id="multfile-label">Files&hellip;</span>
</label>

 enter image description here

2
Nuno André

/* * Bootstrap 3 Dateistil * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Update Bootstrap 3 von Paulo Henrique Foxer * Version 2.0.0 * Lizenziert unter der MIT Lizenz . * * /

(function ($) {
"use strict";

var Filestyle = function (element, options) {
    this.options = options;
    this.$elementFilestyle = [];
    this.$element = $(element);
};

Filestyle.prototype = {
    clear: function () {
        this.$element.val('');
        this.$elementFilestyle.find(':text').val('');
    },

    destroy: function () {
        this.$element
            .removeAttr('style')
            .removeData('filestyle')
            .val('');
        this.$elementFilestyle.remove();
    },

    icon: function (value) {
        if (value === true) {
            if (!this.options.icon) {
                this.options.icon = true;
                this.$elementFilestyle.find('label').prepend(this.htmlIcon());
            }
        } else if (value === false) {
            if (this.options.icon) {
                this.options.icon = false;
                this.$elementFilestyle.find('i').remove();
            }
        } else {
            return this.options.icon;
        }
    },

    input: function (value) {
        if (value === true) {
            if (!this.options.input) {
                this.options.input = true;
                this.$elementFilestyle.prepend(this.htmlInput());

                var content = '',
                    files = [];
                if (this.$element[0].files === undefined) {
                    files[0] = {'name': this.$element[0].value};
                } else {
                    files = this.$element[0].files;
                }

                for (var i = 0; i < files.length; i++) {
                    content += files[i].name.split("\\").pop() + ', ';
                }
                if (content !== '') {
                    this.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
                }
            }
        } else if (value === false) {
            if (this.options.input) {
                this.options.input = false;
                this.$elementFilestyle.find(':text').remove();
            }
        } else {
            return this.options.input;
        }
    },

    buttonText: function (value) {
        if (value !== undefined) {
            this.options.buttonText = value;
            this.$elementFilestyle.find('label span').html(this.options.buttonText);
        } else {
            return this.options.buttonText;
        }
    },

    classButton: function (value) {
        if (value !== undefined) {
            this.options.classButton = value;
            this.$elementFilestyle.find('label').attr({'class': this.options.classButton});
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                this.$elementFilestyle.find('label i').addClass('icon-white');
            } else {
                this.$elementFilestyle.find('label i').removeClass('icon-white');
            }
        } else {
            return this.options.classButton;
        }
    },

    classIcon: function (value) {
        if (value !== undefined) {
            this.options.classIcon = value;
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                this.$elementFilestyle.find('label').find('i').attr({'class': 'icon-white '+this.options.classIcon});
            } else {
                this.$elementFilestyle.find('label').find('i').attr({'class': this.options.classIcon});
            }
        } else {
            return this.options.classIcon;
        }
    },

    classInput: function (value) {
        if (value !== undefined) {
            this.options.classInput = value;
            this.$elementFilestyle.find(':text').addClass(this.options.classInput);
        } else {
            return this.options.classInput;
        }
    },

    htmlIcon: function () {
        if (this.options.icon) {
            var colorIcon = '';
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                colorIcon = ' icon-white ';
            }

            return '<i class="'+colorIcon+this.options.classIcon+'"></i> ';
        } else {
            return '';
        }
    },

    htmlInput: function () {
        if (this.options.input) {
            return '<input type="text" class="'+this.options.classInput+'" style="width: '+this.options.inputWidthPorcent+'% !important;display: inline !important;" disabled> ';
        } else {
            return '';
        }
    },

    constructor: function () {
        var _self = this,
            html = '',
            id = this.$element.attr('id'),
            files = [];

        if (id === '' || !id) {
            id = 'filestyle-'+$('.bootstrap-filestyle').length;
            this.$element.attr({'id': id});
        }

        html = this.htmlInput()+
             '<label for="'+id+'" class="'+this.options.classButton+'">'+
                this.htmlIcon()+
                '<span>'+this.options.buttonText+'</span>'+
             '</label>';

        this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>');

        var $label = this.$elementFilestyle.find('label');
        var $labelFocusableContainer = $label.parent();

        $labelFocusableContainer
            .attr('tabindex', "0")
            .keypress(function(e) {
                if (e.keyCode === 13 || e.charCode === 32) {
                    $label.click();
                }
            });

        // hidding input file and add filestyle
        this.$element
            .css({'position':'absolute','left':'-9999px'})
            .attr('tabindex', "-1")
            .after(this.$elementFilestyle);

        // Getting input file value
        this.$element.change(function () {
            var content = '';
            if (this.files === undefined) {
                files[0] = {'name': this.value};
            } else {
                files = this.files;
            }

            for (var i = 0; i < files.length; i++) {
                content += files[i].name.split("\\").pop() + ', ';
            }

            if (content !== '') {
                _self.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
            }
        });

        // Check if browser is Firefox
        if (window.navigator.userAgent.search(/firefox/i) > -1) {
            // Simulating choose file for firefox
            this.$elementFilestyle.find('label').click(function () {
                _self.$element.click();
                return false;
            });
        }
    }
};

var old = $.fn.filestyle;

$.fn.filestyle = function (option, value) {
    var get = '',
        element = this.each(function () {
            if ($(this).attr('type') === 'file') {
                var $this = $(this),
                    data = $this.data('filestyle'),
                    options = $.extend({}, $.fn.filestyle.defaults, option, typeof option === 'object' && option);

                if (!data) {
                    $this.data('filestyle', (data = new Filestyle(this, options)));
                    data.constructor();
                }

                if (typeof option === 'string') {
                    get = data[option](value);
                }
            }
        });

    if (typeof get !== undefined) {
        return get;
    } else {
        return element;
    }
};

$.fn.filestyle.defaults = {
    'buttonText': 'Escolher arquivo',
    'input': true,
    'icon': true,
    'inputWidthPorcent': 65,
    'classButton': 'btn btn-primary',
    'classInput': 'form-control file-input-button',
    'classIcon': 'icon-folder-open'
};

$.fn.filestyle.noConflict = function () {
    $.fn.filestyle = old;
    return this;
};

// Data attributes register
$('.filestyle').each(function () {
    var $this = $(this),
        options = {
            'buttonText': $this.attr('data-buttonText'),
            'input': $this.attr('data-input') === 'false' ? false : true,
            'icon': $this.attr('data-icon') === 'false' ? false : true,
            'classButton': $this.attr('data-classButton'),
            'classInput': $this.attr('data-classInput'),
            'classIcon': $this.attr('data-classIcon')
        };

    $this.filestyle(options);
});
})(window.jQuery);
2
Paulo Henrique Foxer

Basierend auf der absolut genialen @claviska-Lösung, der alle Kredite zu verdanken sind.

Voll ausgestattete Bootstrap 4-Dateieingabe mit Validierung und Hilfetext.

Basierend auf dem Beispiel für eine Eingabegruppe haben wir ein Dummy-Eingabetextfeld zum Anzeigen des Dateinamens für den Benutzer, das vom Ereignis onchange im tatsächlichen Eingabedateifeld hinter der Beschriftungsschaltfläche ausgefüllt wird. Abgesehen von der Bootstrap 4-Validierung -Unterstützung haben wir es auch möglich gemacht, irgendwo auf die Eingabe zu klicken, um den Dateidialog zu öffnen.

Drei Zustände der Dateieingabe

Die drei möglichen Zustände sind nicht validiert, gültig und ungültig, wenn das Dummy-HTML-Eingabe-Tag-Attribut required gesetzt ist.

 enter image description here

HTML-Markup für die Eingabe

Wir führen nur zwei benutzerdefinierte Klassen ein: input-file-dummy und input-file-btn, um das gewünschte Verhalten korrekt zu gestalten und zu verkabeln. Alles andere ist Standard-Bootstrap-4-Markup.

<div class="input-group">
  <input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
  <div class="valid-feedback order-last">File is valid</div>
  <div class="invalid-feedback order-last">File is required</div>
  <label class="input-group-append mb-0">
    <span class="btn btn-primary input-file-btn">
      Browse… <input type="file" hidden>
    </span>
  </label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>

Verhaltensregeln für JavaScript

Die Dummy-Eingabe muss wie im ursprünglichen Beispiel schreibgeschützt sein, um zu verhindern, dass der Benutzer die Eingabe ändert, die nur über den Dialog zum Öffnen einer Datei geändert werden kann. Leider findet keine Validierung für readonly Felder statt, sodass wir die Editierbarkeit der Eingabe für Fokus und Unschärfe ( Abfrageereignisseonfocusin und onfocusout) umschalten und sicherstellen, dass sie nach Auswahl einer Datei wieder validierbar ist.

Abgesehen davon, dass das Textfeld auch durch Auslösen des Klickereignisses der Schaltfläche anklickbar gemacht wurde, wurde der Rest der Funktionalität zum Auffüllen des Dummy-Felds von @claviska ins Auge gefasst.

$(function () {
  $('.input-file-dummy').each(function () {
    $($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
      $(ev.data.dummy)
        .val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
        .trigger('focusout');
    });
    $(this).on('focusin', function () {
        $(this).attr('readonly', '');
      }).on('focusout', function () {
        $(this).removeAttr('readonly');
      }).on('click', function () {
        $(this).parent().find('.input-file-btn').click();
      });
  });
});

Benutzerdefinierte Stiländerungen

Vor allem soll das Feld readonly nicht zwischen grauem Hintergrund und Weiß springen, damit es weiß bleibt. Die span-Taste hat keinen Zeigercursor, aber wir müssen trotzdem einen für die Eingabe hinzufügen.

.input-file-dummy, .input-file-btn {
  cursor: pointer;
}
.input-file-dummy[readonly] {
  background-color: white;
}

nJoy!

1
nickl-

 enter image description here

Der folgende Code macht wie oben das Bild

Html

<form>
<div class="row">
<div class="col-lg-6">
<label for="file">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Browse</button>
</span>
<input type="text" class="form-control" id="info" readonly="" style="background: #fff;" placeholder="Search for...">
</div><!-- /input-group -->
</label>
</div><!-- /.col-lg-6 -->
</div>

</div>
<input type="file" style="display: none;" onchange="$('#info').val($(this).val().split(/[\\|/]/).pop()); " name="file" id="file">
</form>

Javascript

<script type="text/javascript">

$(function() {
    $("label[for=file]").click(function(event) {
        event.preventDefault();
        $("#file").click();
    });
});

</script>
1
NaveenDA

Ich habe die @claviska-Antwort geändert und funktioniert so, wie ich möchte (Bootstrap 3, 4 nicht getestet):

<label class="btn btn-default">
    <span>Browse</span>
    <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>
1
marioosh

Hier ist ein alternativer Trick, es ist nicht die beste Lösung, aber Sie haben nur die Wahl

HTML Quelltext:

<button clss="btn btn-primary" id="btn_upload">Choose File</button>
<input id="fileupload" class="hide" type="file" name="files[]">

Javascript:

$("#btn_upload").click(function(e){
e.preventDefault();
$("#fileupload").trigger('click');
});
0
Somwang Souksavatd

Versuchen Sie es in Bootstrap v.3.3.4

<div>
    <input id="uplFile" type="file" style="display: none;">

    <div class="input-group" style="width: 300px;">
        <div  id="btnBrowse"  class="btn btn-default input-group-addon">Select a file...</div>
        <span id="photoCover" class="form-control">
    </div>
</div>

<script type="text/javascript">
    $('#uplFile').change(function() {
        $('#photoCover').text($(this).val());
    });

    $('#btnBrowse').click(function(){
        $('#uplFile').click();
    });
</script>
0
Siyavash Hamdi

Ich habe das gleiche Problem und versuche es so.

<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>

Das CSS

<style>
.btn-file {
    position:absolute;
}
</style>

Die JS

<script>
$(document).ready(function(){
    $('.btn-file').click(function(){
        $('input[name="image"]').click();
    });
});
</script>

Hinweis : Die Schaltfläche .btn-file muss im selben Tag wie die Eingabedatei stehen

Ich hoffe, Sie haben die beste Lösung gefunden ...

0
Esgi Dendyanri

In Bezug auf die Antwort von claviska - wenn Sie den Namen der hochgeladenen Datei in einem einfachen Datei-Upload anzeigen möchten, können Sie dies im onchange-Ereignis der Eingabe tun. Verwenden Sie einfach diesen Code:

 <label class="btn btn-default">
                    Browse...
                    <span id="uploaded-file-name" style="font-style: italic"></span>
                    <input id="file-upload" type="file" name="file"
                           onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
 </label>

Dieser Jquery-JS-Code ist dafür verantwortlich, den Namen der hochgeladenen Datei abzurufen:

$('#file-upload')[0].value

Oder mit Vanilla JS:

document.getElementById("file-upload").value

 example

0
Michał Stochmal

Kein schickes Shiz erforderlich:

HTML:

<form method="post" action="/api/admin/image" enctype="multipart/form-data">
    <input type="hidden" name="url" value="<%= boxes[i].url %>" />
    <input class="image-file-chosen" type="text" />
    <br />
    <input class="btn image-file-button" value="Choose Image" />
    <input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
    <br />
    <br />
    <input class="btn" type="submit" name="image" value="Upload" />
    <br />
</form>

JS:

$('.image-file-button').each(function() {
      $(this).off('click').on('click', function() {
           $(this).siblings('.image-file').trigger('click');
      });
});
$('.image-file').each(function() {
      $(this).change(function () {
           $(this).siblings('.image-file-chosen').val(this.files[0].name);
      });
});

VORSICHT: Die drei betreffenden Formularelemente MÜSSEN gleichgeschwister sein (gewählte Bilddatei, .image-Datei-Schaltfläche, .image-Datei).

0
mattdlockyer

Ich dachte, ich würde meinen Dreierwert hinzufügen, um nur zu sagen, wie die Standardeingabe für .custom-file-label und custom-file-input BS4-Datei ist und wie diese verwendet werden kann.

Die letztere Klasse gehört zur Eingabegruppe und ist nicht sichtbar. Das erstere ist das sichtbare Label und hat ein: after Pseudoelement, das wie eine Schaltfläche aussieht.

<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>

Sie können keine Klassen zu psuedoelements hinzufügen, aber Sie können sie in CSS (oder SASS) formatieren.

.custom-file-label:after {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
    pointer: cursor;
}
0
Matteo Ferla