使用自定义文本在按钮类型=文件顶部放置按钮

Question

我正在尝试创建自定义上传文件按钮的错觉，因为<input type='file'/>的css是有限的并且很痛苦。我目前正在使用以下代码：

HTML

<button type="button" class="uploadcontainer"><input type="file" class="docuploadbtn" id="t1url" name="t1url"/>Upload File</button>

CSS

.docuploadbtn {
    opacity: 0;
}

.uploadcontainer {
    width: 100px;
}

此代码的组合显示一个按钮，后面有一个＆＃34;隐藏＆＃34;顶部的上传按钮，但这会按下文本＆＃34;上传文件＆＃34;在这下面制作一个比正常尺寸大的按钮。

以下是现在的样子：

这就是我想要的样子：

任何帮助总是非常感谢。提前谢谢！

Answer 1

这就是我处理type=file的方式，它还包括一些jQuery增强功能，但你并不需要它。希望这会有所帮助：

if (jQuery) {
    (function ($) {
        "use strict";
        $('document').ready(function () {
            $( '.jsFileUpload' ).each( function() {
                var $input   = $( this ),
                    $label   = $input.next( 'label' ),
                    labelVal = $label.html();

                $input.on( 'change', function( e )
                {
                    var fileName = '';

                    if( this.files && this.files.length > 1 )
                        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
                    else if( e.target.value )
                        fileName = e.target.value.split( '\\' ).pop();

                    if( fileName )
                        $label.find( '.jsFileName' ).html( fileName );
                    else
                        $label.html( labelVal );
                });

                // Firefox bug fix
                $input
                .on( 'focus', function(){ $input.addClass( 'fileupload-has-focus' ); })
                .on( 'blur', function(){ $input.removeClass( 'fileupload-has-focus' ); });
            });
        });
    }(jQuery));
}

.vis-hide {
  overflow: hidden;
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
}

[type="file"] {
  overflow: hidden;
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
}
[type="file"] + label {
  display: inline-block;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #000;
  cursor: pointer;
}
[type="file"] + label:hover {
  color: #fff;
  background-color: red;
}
[type="file"].fileupload-has-focus + label, [type="file"]:focus + label {
  color: #fff;
  background-color: red;
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
[type="file"].fileupload-has-focus + label *, [type="file"]:focus + label * {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileUpload" class="jsFileUpload" data-multiple-caption="{count} files selected" />
<label for="fileUpload">
  <span class="jsFileName">Upload file(s)</span>
</label>

Answer 2

我找到了解决创建自定义上传按钮问题的方法：

HTML

<input type="button" class="upbtn" value="Upload File"/>
<input type="file" class="docuploadbtn" id="t1url" name="t1url"/>

CSS

.upbtn {
    width: 100px;
    display: inline-block;
}

.docuploadbtn {
    visibility: hidden;
    display: inline-block;
}

JQuery的

$('.upbtn').click(function(){
    $(this).siblings('.docuploadbtn').click();
});