Javascript 当用户通过 <input type="file" /> 选择文件时如何获取文件名？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2189615/
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
How to get file name when user select a file via <input type="file" />?
提问by user198729
I've seen similar questions before,which ends up with no solution,because of security reasons.
我以前见过类似的问题，但出于安全原因，最终没有解决方案。
But today I see hostmonster has successfully implemented this,when I open a ticket and attach a file in their backend.
但是今天我看到 hostmonster 已经成功地实现了这一点，当我打开一张票并在他们的后端附加一个文件时。
It works both with firefox and IE(version 8 to be exact).
它适用于 Firefox 和 IE（确切地说是版本 8）。
I've verified it's exactly client side scripting,no request is sent(with firebug).
我已经验证它完全是客户端脚本，没有发送请求（带萤火虫）。
Now,can we re-consider this question?
现在，我们可以重新考虑这个问题吗？
回答by CMS
You can get the file name, but you cannot get the full client file-system path.
您可以获得文件名，但无法获得完整的客户端文件系统路径。
Try to access to the valueattribute of your file inputon the changeevent.
尝试访问value您的文件的属性input上的change事件。
Most browsers will give you only the file name, but there are exceptions like IE8 which will give you a fakepath like: "C:\fakepath\myfile.ext"and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).
大多数浏览器只会给你文件名，但也有像 IE8 这样的例外，它会给你一个假路径，如："C:\fakepath\myfile.ext"和旧版本（IE <= 6）实际上会给你完整的客户端文件系统路径（由于缺少安全）。
document.getElementById('fileInput').onchange = function () {
alert('Selected file: ' + this.value);
};
回答by Alex Paulino
You can use the next code:
您可以使用下一个代码：
JS
JS
function showname () {
var name = document.getElementById('fileInput');
alert('Selected file: ' + name.files.item(0).name);
alert('Selected file: ' + name.files.item(0).size);
alert('Selected file: ' + name.files.item(0).type);
};
HTML
HTML
<body>
<p>
<input type="file" id="fileInput" multiple onchange="showname()"/>
</p>
</body>
回答by John Boker
just tested doing this and it seems to work in firefox & IE
刚刚测试这样做，它似乎在 Firefox 和 IE 中工作
<html>
<head>
<script type="text/javascript">
function alertFilename()
{
var thefile = document.getElementById('thefile');
alert(thefile.value);
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" onchange="alertFilename()" />
<input type="button" onclick="alertFilename()" value="alert" />
</form>
</body>
</html>
回答by vibs2006
I'll answer this question via Simple Javascriptthat is supported in all browsers that I have tested so far (IE8 to IE11, Chrome, FF etc).
我将通过迄今为止我测试过的所有浏览器（IE8 到 IE11、Chrome、FF 等）都支持的Simple Javascript来回答这个问题。
Here is the code.
这是代码。
function GetFileSizeNameAndType()
{
var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.
var totalFileSize = 0;
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0)
{
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++)
{
//ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
var fsize = fi.files.item(i).size;
totalFileSize = totalFileSize + fsize;
document.getElementById('fp').innerHTML =
document.getElementById('fp').innerHTML
+
'<br /> ' + 'File Name is <b>' + fi.files.item(i).name
+
'</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
+
'</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
}
}
document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
} <p>
<input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
</p>
<div id="fp"></div>
<p>
<div id="divTotalSize"></div>
</p>*Please note that we are displaying filesize in KB (Kilobytes). To get in MB divide it by 1024 * 1024 and so on*.
*请注意，我们以 KB（千字节）为单位显示文件大小。要获得 MB，请将其除以 1024 * 1024 等等*。
It'll perform file outputs like these on selecting
它将在选择时执行这样的文件输出
