<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
隐藏文件输入。创建一个新的输入来捕捉点击事件,并将其转发到隐藏的输入:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
其他回答
这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本,将其与div的背景色混合。然后你可以给div一个你喜欢的标题。
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" />
</div>
你可以放一张图片,像这样做:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
警告: 在IE9和IE10中,如果你通过javascript触发文件输入中的onClick,表单将被标记为“危险”,不能用javascript提交,不确定它是否可以传统地提交。
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>
JS
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
更多的http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件,我保持现有的值属性。您只需要添加css。你可以试试这个解决方案。
.btn-file-upload { 宽度:187 px; 位置:相对; } .btn-file-upload:{后 内容:attr(价值); 位置:绝对的; 上图:0; 左:0; 底部:0; 宽度:48%; 背景:# 795548; 颜色:白色; border - radius: 2 px; text-align:中心; 字体大小:12 px; 行高:2; } <input type="file" class="btn-file-upload" value="Uploadfile" />
我认为这就是你想要的:
<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">