кнопка места сверху кнопки type = файл с настраиваемым текстом

Question

Я пытаюсь создать иллюзию пользовательской кнопки загрузки файла, так как css для <input type='file'/> ограничен и боль. Я в настоящее время, используя код ниже:

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

Сочетание этого кода показывает кнопку, что за ней есть кнопка загрузки «скрытый» на вершине, но это подталкивает текст «Загрузить файл» под этим, делая кнопку большего размера, чем обычный размер.

Вот что он выглядит сейчас:

И это то, что я хочу, чтобы это выглядело как:

Любая помощь всегда с благодарностью. Заранее спасибо!

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>