Question

我想在使用Choose File时更改“input="file"”按钮上的默认文字。

enter image description here

我该怎么做？另外，您可以在图像中看到按钮位于文本的左侧。我怎么能把它放在文本的右侧？

Answer 1

使用window.onpopstate = function(){ window.location="StartPage";//you page };的{{1}}属性"for"。

label

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

＆＃13;

input

＆＃13;

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

＆＃13;

Answer 2

每个浏览器都有自己的控件再现，因此您无法更改控件的文本或方向。

如果您需要html / css解决方案而不是Flash或silverlight解决方案，可能需要尝试一些“类型”的黑客攻击。

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

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就个人而言，由于大多数用户坚持使用他们选择的浏览器，因此可能习惯于在默认的再现中看到控件，如果他们看到不同的东西，他们可能会感到困惑（取决于你的用户类型）处理）。

Answer 3

这可能会对将来的某个人有所帮助，您可以根据需要为输入设置标签样式，并在其中放置任何内容，并使用display 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>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

Answer 4

我认为这就是你想要的：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

＆＃13;

Answer 5

这是不可能的。否则，您可能需要使用Silverlight或Flash上传控件。

Answer 6

在这里你可以这样做：

的 jQuery的：

$(function() { $("#labelfile").click(function() { $("#imageupl").trigger('click'); }); })

<强> CSS

.file { position: absolute; clip: rect(0px, 0px, 0px, 0px); display: block; } .labelfile { color: #333; background-color: #fff; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; white-space: nowrap; padding: 6px 8px; font-size: 14px; line-height: 1.42857143; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

HTML code：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="margin-top:4px;"> <input name="imageupl" type="file" id="imageupl" class="file" /> <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label> </div>

Answer 7

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });

.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

Answer 8

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
Optional text here 

<label for="img" class="btn btn-info">Try me</label>
<input type="file" id="img" style="display:none">

使用 JQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Optional text here 

<button style="cursor:pointer" onclick="$('#input').click()">Click me</button>
<input type="file" id="input" style="display:none">

Answer 9

使用Bootstrap，您可以像下面的代码那样做。

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.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;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

Answer 10

我制作了一个剧本并在GitHub上发布：获取 selectFile.js 易于使用，随意克隆。

的 HTML

<input type=file hidden id=choose name=choose> <input type=button onClick=getFile.simulate() value=getFile> <label id=selected>Nothing selected</label>

的 JS

var getFile = new selectFile; getFile.targets('choose','selected');

<强>样本

<强> jsfiddle.net/Thielicious/4oxmsy49/

Answer 11

2017年更新：

我已经研究过如何实现这一目标。最好的解释/教程在这里： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

我将在此处写下摘要，以防它变得不可用。所以你应该有HTML：

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

然后用CSS隐藏输入：

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

然后设置标签样式：

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

然后可选择添加JS以显示文件名：

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

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

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

但是真的只是阅读教程并下载演示，它真的很棒。

Answer 12

我使用a来触发button：

input

快速清洁。

Answer 13

这是引导程序的工作方式，只有您应该将原始输入放置在某处... idk 在头上并删除
（如果有的话），因为它只是隐藏的，反正占用空间：）

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

Answer 14

让我添加一个我用过的黑客。我想要一个允许你拖放文件的部分，我希望拖放部分可以与原始上传按钮一起点击。

Here is how it looked like当我完成时（减去拖放能力，有很多关于如何做到这一点的教程）。

然后我实际上创建了a series of blog posts，主要是关于文件上传按钮。

Answer 15

这应该有效：

输入。 className :: - webkit-file-upload-button { 风格内容.. }

Answer 16

这是非常简单的纯CSS创建自定义输入文件的方法。

使用标签，但正如您之前的答案所知，标签不会调用onclick firefox中的函数，可能是一个bug，但与以下内容无关。

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

您所做的就是设置标签的样式以查看您希望的样式

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

现在只需隐藏实际输入按钮，但您无法将其设置为visability: hidden

通过设置opacity: 0;

来隐藏

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

现在您可能已经注意到我的标签上有与我输入字段相同的类，这是因为我希望两者都具有相同的样式，因此无论您何时单击标签，您实际上都是单击在不可见的输入字段上。

Answer 17

您可以使用此方法，即使输入大量文件也可以使用。

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>

Answer 18

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

到目前为止，这仍然是最好的

Answer 19

我的解决方案...

HTML：

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

jQuery：

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

这只是邪恶的：D

更改输入类型=“文件”中的默认文本？

19 个答案:

我认为这就是你想要的：