将按钮放在按钮类型=带有自定义文本的文件的顶部

Answer 1

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

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

Answer 2

这就是我处理

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>