当用户通过 < input type = “ file”/> 选择一个文件时，如何获得文件名？

我以前见过类似的问题，但由于安全原因，最终没有解决方案。

但是今天我看到 hostMonster 已经成功地实现了这一点，当我打开一个票据并在他们的后端附加一个文件。

它同时适用于 Firefox 和 IE (准确地说是8版本)。

我已经验证了它确实是客户端脚本，没有发送任何请求(通过 Firebug)。

现在，我们能重新考虑这个问题吗？

252429 次浏览
小开
最佳答案

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you a fake path 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).

document.getElementById('fileInput').onchange = function () {
alert('Selected file: ' + this.value);
};
小开

just tested doing this and it seems to work in 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>
小开

I'll answer this question via Simple Javascript that is supported in all browsers that I have tested so far (IE8 to IE11, Chrome, FF etc).

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*.

It'll perform file outputs like these on selecting Snapshot of a sample output of this code

小开

You can use the next code:

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

<body>
<p>
<input type="file" id="fileInput" multiple onchange="showname()"/>
</p>
</body>
小开

To clean up the C:\fakepath\

I add .replace('C:\\fakepath\\', ' ') to replace it with an empty string

小开

This is based on a comment under the accepted answer, but easiest might be:

$(".fileUploader").on("change", function(e){
console.log(e.target.files[0].name);
})

Or iterate if you have mutliple file selection enabled on that input. Assumes <input class="fileUploader" ....>.


提交答案