jQuery HTML 如何删除 FileUpload 字段中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18398135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML how to remove text in FileUpload field?
提问by user2492270
When I have a file upload field,
当我有一个文件上传字段时，
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
它会自动创建一个文本“未选择文件”和一个“浏览”按钮。
I want to change or remove this "No file chosen" text.
我想更改或删除此“未选择文件”文本。
Is there anyway to achieve this in css or Javascript?
有没有办法在 css 或 Javascript 中实现这一点？
Thanks
谢谢
回答by Harsh
You can apply css rules like...
您可以应用 css 规则，例如...
input[type=file]{ color:transparent; }
input[type=file]{ color:transparent; }
回答by David
First of all. You have to hide your input:
首先。你必须隐藏你的输入：
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
其次，你必须用你的皮肤创建替代按钮：
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
最后一步是创建一个 javascript 脚本，将替代按钮与原始按钮链接起来：
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
回答by Deep Sharma
I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check thisstyling article
我确信您无法更改按钮上的默认标签，它们在浏览器中是硬编码的（每个浏览器都以自己的方式呈现按钮标题）。check this造型文章
回答by user2232273
HTML:
HTML：
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
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)
}
take a look of this fiddle:
看看这个小提琴：
its working for your needs.
它可以满足您的需求。
this demo its a reference of this:stackoverflow questionLINK
这个演示是一个参考：stackoverflow question LINK
From the autor:ampersandre
来自作者：&andre
回答by RGS
<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();
});
Demo:
演示：
回答by Ifeanyi Chukwu
$(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">回答by Castrohenge
You can set the value of the imageinput to "" using jQuery to remove the selected file:
您可以image使用 jQuery将输入的值设置为 "" 以删除所选文件：
$("#image").val("")
See this fiddle:
看到这个小提琴：
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.
注意：这取决于所使用的浏览器。它适用于 FF 22 和 Chrome 29。
回答by Rory McCrossan
The No file chosentext is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selectedand in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
该No file chosen文本是完全依赖于浏览器渲染引擎-我假设你使用Chrome。如果您No file selected在Firefox 中看到并且在 IE 中，您将获得一个完全没有价值的灰色文本框。这是无法改变的。
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.
另一种方法是使用插件（例如this），它使您可以完全控制文件控件的样式。
回答by MD Sayem Ahmed
It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosentext. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
由浏览器来呈现文件上传框。每个人都以自己的方式做到这一点。例如，在我的 chrome 中，我可以看到No file chosen文字。使用 Firefox 的人可能会看到完全不同的东西。没有直接的方法来控制这个渲染过程。
However, there are some hacks which can be used. For details, check out this link.
但是，有一些技巧可以使用。有关详细信息，请查看此链接。
回答by Rituraj ratan
this text show by browser different browser show different message
此文本由浏览器显示不同的浏览器显示不同的消息
chrome show=no file choosen
chrome show=没有选择文件
mozilla show=no file selected
mozilla show=没有选择文件
and same as ie
和 ie 一样
