carga - optimizar la entrega de css wordpress

Botón de carga de elemento de archivo de formulario de arranque de Twitter

Question

¿Por qué no hay un botón de subida de elementos de archivo sofisticados para la rutina de carga de Twitter? Sería genial si se implementara el botón primario azul para el botón de carga. ¿Es posible incluso ajustar el botón de carga usando CSS? (parece un elemento del navegador nativo que no puede ser manipulado)

Answer 1

Solución para carga múltiple

Ajusté dos respuestas anteriores para incluir subidas múltiples. De esta manera, la etiqueta muestra el nombre del archivo, si solo se selecciona uno, o x files en el caso contrario.

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

También se puede aplicar para cambiar el texto del botón y la clase.

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

Answer 2

/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Actualizar bootstrap 3 por Paulo Henrique Foxer * Versión 2.0.0 * Con licencia bajo la licencia MIT. * * /

(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);

Answer 3

Aquí está el truco alternativo, no es la mejor solución pero solo le da una opción

Código HTML:

<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'');
});

Answer 4

Aquí hay una solución para Bootstrap 3 y 4.

Para hacer un control de entrada de archivo funcional que parezca un botón, solo necesita HTML:

HTML

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

Esto funciona en todos los navegadores modernos, incluido IE9 +. Si también necesita soporte para el IE antiguo, utilice el enfoque heredado que se muestra a continuación.

Esta técnica se basa en el atributo hidden HTML5. Bootstrap 4 usa el siguiente CSS para ajustar esta característica en navegadores incompatibles. Es posible que deba agregar si está utilizando Bootstrap 3.

[hidden] {
  display: none !important;
}

Enfoque legado para el antiguo IE

Si necesita soporte para IE8 y anteriores, use el siguiente 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;
}

Tenga en cuenta que el IE antiguo no activa la entrada del archivo cuando hace clic en una <label> , por lo que el "bloat" de CSS hace un par de cosas para solucionarlo:

• Hace que la entrada del archivo abarque todo el ancho / alto del entorno <span>
• Hace invisible la entrada del archivo

Comentarios y lecturas adicionales

He publicado más detalles sobre este método, así como ejemplos de cómo mostrar al usuario qué archivos y cuántos están seleccionados:

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Answer 5

Con algo de inspiración de otras publicaciones anteriores, aquí hay una solución completa que combina lo que parece un campo de control de formulario con un complemento de grupo de entrada para un widget de entrada de archivo limpio que incluye un enlace al archivo actual.

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for  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>

Answer 6

Con respecto a la respuesta de claviska: si desea mostrar el nombre del archivo cargado en un archivo básico, puede hacerlo en el evento onchange las entradas. Solo usa este código:

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

Este código de jquery JS es responsable de recuperar el nombre del archivo cargado:

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

O con vainilla JS:

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

Answer 7

Está incluido en la horquilla de arranque de Jasny.

Un simple botón de carga puede ser creado usando

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

Con el plugin fileupload puedes crear widgets más avanzados. Echa un vistazo a http://jasny.github.io/bootstrap/javascript/#fileinput

Answer 8

Este es el mejor estilo de carga de archivos que me gusta:

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

Puedes obtener demo y más estilos en:

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

pero al usar esto, deberías reemplazar el bootstrap de twitter con archivos de bootstrap de jasny

Saludos.

Answer 9

Funciona para mi:

• Bonito campo de entrada de archivo en Bootstrap

Actualizar

jQuery plugin style :

// 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 );

Answer 10

He creado un botón de carga personalizado para aceptar solo imágenes, que se pueden modificar según su requerimiento.

¡¡Espero que esto ayude!! :)

(Utilizado marco Bootstrap)

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!'');
    }
  }
});

Answer 11

He modificado la respuesta de @claviska y funciona como me gusta (Bootstrap 3, 4 no probado):

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

Answer 12

Intenta seguir en el 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>

Answer 13

Los botones de carga son una molestia de estilo porque estiliza la entrada y no el botón.

pero puedes usar este truco:

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

Resumen:

1. Tome un <input type="file"> normal y colóquelo en un elemento con position: relative .

2. A este mismo elemento principal, agregue un <input> normal y una imagen, que tengan los estilos correctos. Coloque estos elementos absolutamente, de modo que ocupen el mismo lugar que <input type="file"> .

3. Establezca el índice z de <input type="file"> en 2 para que quede encima de la entrada / imagen con estilo.

4. Finalmente, establezca la opacidad de <input type="file"> a 0. El <input type="file"> ahora se vuelve efectivamente invisible, y la entrada de estilos / imagen brilla, pero aún puede hacer clic en "Examinar botón " Si el botón se coloca encima de la imagen, el usuario parece hacer clic en la imagen y obtiene la ventana de selección de archivo normal. (Tenga en cuenta que no puede usar la visibilidad: oculta, porque un elemento verdaderamente invisible no se puede cliquear, y necesitamos que se pueda hacer clic)

Answer 14

Me sorprende que no haya ninguna mención del elemento <label> .

Solución:

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

No hay necesidad de ningún JS, o css funky ...

Solución para incluir el nombre del archivo:

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

La solución anterior requiere jQuery.

Answer 15

No se requiere shiz elegante

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

PRECAUCIÓN: Los tres elementos de formulario en cuestión DEBEN ser hermanos entre sí (.image-file-selected, .image-file-button, .image-file)

Answer 16

Por favor, echa un vistazo a Twitter Bootstrap File Input . Utiliza una solución muy simple, solo agrega un archivo javascript y pega el siguiente código:

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

Answer 17

Respuesta simplificada utilizando partes de otras respuestas, principalmente user2309766 y dotcomsuperstar.

caracteristicas:

• Utiliza el complemento de botón Bootstrap para botón y campo.
• Sólo una entrada; Las entradas múltiples serían recogidas por un formulario.
• Sin css extra excepto "display: none;" para ocultar la entrada del archivo.
• El botón visible dispara un evento de clic para la entrada de archivos ocultos.
• split para eliminar la ruta del archivo usa expresiones regulares y delimitadores ''/' y ''/''.

Código:

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

Answer 18

Sin un complemento adicional requerido, esta solución bootstrap funciona muy bien para mí:

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

manifestación:

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

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

Answer 19

Tengo el mismo problema, y ​​lo intento así.

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

El CSS

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

El js

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

Nota: el botón .btn-file debe estar en la misma etiqueta que el archivo de entrada

Espero que hayas encontrado la mejor solución ...

Answer 20

Una solución simple con resultado aceptable:

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

Y el estilo:

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

Answer 21

Yo uso http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

o

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

Answer 22

markusslima.github.io/bootstrap-filestyle

$(":file").filestyle();

O

<input type="file" class="filestyle" data-input="false">

Answer 23

El siguiente código lo hace como encima de la imagen.

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>

Answer 24

Esto funciona perfectamente para mi

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