我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" 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=“图像上传” 接受=“图像/*” 样式=“显示:无”>
其他回答
诀窍是在点击文件输入时触发一个点击事件,并通过CSS管理默认输入文件的可见性。你可以这样做: 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代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input name="imageupl" type="file" id="imageupl" class="file" />
<label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
使用标签的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 >
我做了一个脚本,并在GitHub上发布:get selectFile.js 易于使用,随时克隆。
超文本标记语言
<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/
我认为这就是你想要的:
<!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 >
这可能会在将来帮助别人,你可以为输入设置你喜欢的标签,把你想要的任何东西放在里面,隐藏输入,显示为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=“图像上传” 接受=“图像/*” 样式=“显示:无”>