我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
当前回答
每个浏览器都有自己的控件呈现方式,因此您不能更改控件的文本或方向。
如果你想要一个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
就我个人而言,因为大多数用户坚持使用他们所选择的浏览器,因此可能习惯于在默认呈现中看到控件,如果他们看到不同的内容(取决于您所处理的用户类型),他们可能会感到困惑。
其他回答
每个浏览器都有自己的控件呈现方式,因此您不能更改控件的文本或方向。
如果你想要一个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
就我个人而言,因为大多数用户坚持使用他们所选择的浏览器,因此可能习惯于在默认呈现中看到控件,如果他们看到不同的内容(取决于您所处理的用户类型),他们可能会感到困惑。
这是不可能的。否则,你可能需要使用Silverlight或Flash上传控件。
我将使用一个按钮来触发输入:
<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />
快速干净。
您可以使用一个简单的按钮和隐藏输入文件
使用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);
});
从这个问题的答案,我修复了许多评论说,不工作,这是它没有显示多少文件用户选择。
<label for="uploadedFiles" class="btn btn-sm btn-outline-primary">Choose files</label>
<input type="file" name="postedFiles" id="uploadedFiles" multiple="multiple" hidden onchange="javascript:updateList()" />
<input class="btn btn-primary mt-2 btn-action" type="submit" value="Send" formmethod="post" formaction="@Url.Action("Create")" /><br />
<span id="selected-count">Selected files: 0</span>
<script>
updateList = function () {
var input = document.getElementById('uploadedFiles');//list of files user uploaded
var output = document.getElementById('selected-count');//element displaying count
output.innerHTML = 'Selected files: ' + input.files.length;
}
</script>
你可以很容易地通过显示文件名来改进它,而不是你想做的任何事情,但我想要的是通知用户他们已经选择了文件。