您可以使用一个简单的按钮和隐藏输入文件

使用jquery和bootstrap:

HTML代码

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS:

.hidden{display:none}

JS :

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});

您可以使用这种方法，它即使输入大量文件也能工作。

const fileBlocks = document.querySelectorAll('.file-block') const buttons = document.querySelectorAll('.btn-select-file') ;[...buttons].forEach(function (btn) { btn.onclick = function () { btn.parentElement.querySelector('input[type="file"]').click() } }) ;[...fileBlocks].forEach(function (block) { block.querySelector('input[type="file"]').onchange = function () { const filename = this.files[0].name block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename } }) .btn-select-file { border-radius: 20px; } input[type="file"] { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="file-block"> <button class="btn-select-file">Select Image 1</button> <input type="file"> </div> <br> <div class="file-block"> <button class="btn-select-file">Select Image 2</button> <input type="file"> </div>

这可能会在将来帮助别人，你可以为输入设置你喜欢的标签，把你想要的任何东西放在里面，隐藏输入，显示为none。

它在iOS的cordova上完美地工作

<link href=“https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css” rel=“stylesheet”/> <label for=“imageUpload” class=“btn btn-primary btn-block btn-outlined”>Seleccionar imagenes</label> <输入类型=“文件” id=“图像上传” 接受=“图像/*” 样式=“显示：无”>

使用标签的for属性进行输入。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码

$(" #文件").change(函数(){ 文件名= this.files[0].name; console.log(文件名); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div > <label for="files" class="btn">选择图像</label> <input id="files" style="visibility:hidden;" type="file"> . < / div >

我认为这就是你想要的:

<！DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> < / >头 身体< > <按钮样式= "显示:块;宽度:120 px;高度:30 px; " onclick = " . getelementbyid (getFile) .click ()你的文本在这里</按钮> <input type='file' id="getFile" style="display:none"> 身体< / > < / html >

为了实现这一点，默认的输入按钮必须使用display:none CSS属性隐藏，并添加一个新的按钮元素来替换它，因此我们可以根据需要进行定制。

与引导

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”> 此处为可选文本 <label for=“img” class=“btn btn-info”>试试我</label> <输入类型=“文件” id=“img” 样式=“显示：无”>

与jQuery

在本例中，添加到button元素的onclick属性指示JavaScript在单击可见按钮时单击隐藏的默认输入按钮。

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> 此处为可选文本 <button style=“cursor：pointer” onclick=“$（'#input'）.click（）”>Click me</button> <输入类型=“文件” id=“输入” 样式=“显示：无”>

简单的JavaScript事件监听器

. getelementbyid (btn)。addEventListener('click'， () => { . getelementbyid(“输入”).click (); }) 此处可选文本 <button style="cursor:pointer" id="btn">点击我</button> <input type="file" id="input" style="display:none">