[英]HTML how to remove text in FileUpload field?
当我有一个文件上传字段时,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
它会自动创建“无文件选择”文本和“浏览”按钮。
我想更改或删除此“未选择文件”文本。
无论如何在css或Javascript中实现这一点?
谢谢
您可以应用css规则,如...
input[type=file]{ color:transparent; }
首先。 你必须隐藏你的输入:
input#image{position:fixed;top:-100px;}
其次,你必须用你的皮肤创建替代按钮:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
最后一步是创建一个javascript脚本,链接替代按钮与原始按钮:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
您可以使用jQuery将输入的image
值设置为“”以删除所选文件:
$("#image").val("")
看到这个小提琴:
注意:这取决于使用的浏览器。 它适用于FF 22和Chrome 29。
我确信您无法更改按钮上的默认标签,它们在浏览器中是硬编码的(每个浏览器都以自己的方式呈现按钮标题)。 check this
造型文章
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
看看这个小提琴 :
它的工作满足您的需求。
这个演示了它的一个参考: stackoverflow问题 LINK
来自autor:&ampersandre
$(function () { $('input[type="file"]').change(function () { if ($(this).val() != "") { $(this).css('color', '#333'); }else{ $(this).css('color', 'transparent'); } }); })
input[type="file"]{ color: transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="app_cvupload" class="fullwidth input rqd">
No file chosen
text完全依赖于浏览器呈现引擎 - 我假设您使用Chrome。 如果Firefox你会看到No file selected
,在IE中你会得到一个没有任何价值的灰色文本框。 这不能改变。
另一种方法是使用一个插件(例如这个 ),它可以让你完全控制文件控件的样式。
由浏览器来渲染文件上传框。 每个人都以自己的方式做到这一点。 例如,在我的chrome中,我可以看到No file chosen
text。 使用Firefox的人可能会完全看到其他内容。 没有直接的方法来控制此渲染过程。
但是,有一些黑客可以使用。 有关详细信息,请查看此链接 。
<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
<a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a>
JQuery的:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
演示:
本文通过浏览器显示不同浏览器显示的不同消息
chrome show =没有文件选择
mozilla show =未选择任何文件
和ie一样
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.