我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
当前回答
<!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 >
其他回答
<!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 >
您可以使用一个简单的按钮和隐藏输入文件
使用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);
});
这可能会在将来帮助别人,你可以为输入设置你喜欢的标签,把你想要的任何东西放在里面,隐藏输入,显示为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=“图像上传” 接受=“图像/*” 样式=“显示:无”>
使用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>
我将使用一个按钮来触发输入:
<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />
快速干净。