<input type="file" id="fileID">这个文本框里的值 怎么清空啊？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<input type="file" id="fileID">这个文本框里的值 怎么清空啊？相关的知识，希望对你有一定的参考价值。
用JS 我试过了简单的方法不行 所以想请教各位高手们
参考技术A 一般情况下，不允许通过脚本来对文件上传框赋值。下面给你一个变通的方法。就是创建一个新的input type="file"把原来的替换掉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
function clearFile()
var oldFile = document.getElementById("fileID");
var newFile = document.createElement("input");
newFile.id = oldFile.id;
newFile.type = "file";
oldFile.parentNode.replaceChild(newFile, oldFile);
</script>
</head>
<body>
<div>
<input type="file" id="fileID" />
<input type="button" value="clear file" onclick="clearFile()" />
</div>
</body>
</html>本回答被提问者采纳
我们可以改变 <input type="file"> 样式吗？ [复制]
【中文标题】我们可以改变 <input type="file"> 样式吗？ [复制]【英文标题】：Can we change <input type="file"> style? [duplicate] 【发布时间】：2011-02-19 00:15:04 【问题描述】：我尝试更改 HTML 表单，输入类型文件。这是我的代码：
HTML，表单 ID = 表单
<input class="upload_file" type="file" id="file" name="file" />
.CSS
I tried both:
.upload_button
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
#form input[type=file]
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
这两种方法都不起作用。我确实从一些网站上看到，比如 facebook、youtube、google 或 twitter，它们有不同的风格。想知道他们是怎么做到的。
【问题讨论】：
【参考方案1】：例如，试试这个变体http://www.quirksmode.org/dom/inputfile.html
【讨论】：
【参考方案2】：你不能对输入类型文件做任何事情（除了巨大的黑客）。我知道这听起来很可怕，但网络标准仍然没有提出解决方案。
不过，我建议您使用更灵活的方法，例如 swfUpload，它可以让您更改 stile，并在上传之前检查文件大小。
可以在here找到一些简洁的例子
希望对你有帮助
【讨论】：
啊...我应该早点在这里问这个问题，而不是花几个小时来调试它。叹息 没关系。我们都做到了:-) swf 存在很多安全风险，但没关系。 markusslima.github.io/bootstrap-filestyle【参考方案3】：其实你可以的！
您必须使用 SI.Files 库来完成。
Here 是一篇很好的文章，详细介绍了它是如何完成的：
祝你好运！
【讨论】：
【参考方案4】：您可以更改高度的字体大小或关注此网址http://www.quirksmode.org/dom/inputfile.html（这基本上是我在项目中所做的）。
【讨论】：
谢谢！我尝试了 line-height 但这不起作用。看起来 type="file" 上的字体大小样式是获得高按钮的唯一方法。你可以在这里看到问题jsfiddle.net/gabrieleromanato/mxq9R 光标也看起来不对，接下来尝试修复它。【参考方案5】：你为什么不把 css 放到 display: none 然后用另一个按钮触发这个按钮？这可以使用 javascript 轻松完成，然后您可以完全自己设置按钮样式
下面是一个如何用另一个按钮触发按钮的示例，但这只是众多方法中的一种： One button firing another buttons click event
【讨论】：
【参考方案6】：嘿， 只需将 CSS 定义添加到您的 html 输入标签：
喜欢：
<select style:"...whatYoureadBelow..."></select>
或
<input style:"...whatYoureadBelow..." />
CSS 定义：
border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;
因此，您将在 facebook 或其他地方获得您所拥有的内容；)
【讨论】：
您显然没有阅读 OP 提出的问题...【参考方案7】：有史以来最好的破解。输入文件 HTML：
<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>
使用 jQuery：
$('#triggerFile').on('click', function(e)
e.preventDefault()
$("#inputFile").trigger('click')
);
【讨论】：
以上是关于<input type="file" id="fileID">这个文本框里的值 怎么清空啊？的主要内容，如果未能解决你的问题，请参考以下文章