如何从 IE 浏览器的输入文件标签中获取 javascript 中的文件名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27898745/
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 the fileName in javascript from input file tag in IE browser
提问by Hitesh
I have done this in jQuery, to get filename from input file tag, With jQuery it works perfectly.
我已经在 jQuery 中完成了这个，从输入文件标签中获取文件名，使用 jQuery 它完美地工作。
//jQuery('input[type=file]').on('change', prepareUpload);
document.getElementsByTagName('input[type=file]').addEventListener('change',prepareUpload1,true);
/*
//this works in jQuery
function prepareUpload(event)
{
var files = event.target.files;
var fileName = files [0].name
alert(fileName);
}
*/
/****Check it here ****/
// it does not work in javascript
function prepareUpload1(event)
{
var files = event.target.files;
var fileName = files [0].name
alert("fileName 2 : "+fileName);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />But I found Event.target does not work in IE, I tried to change it to java script addeventlistener, it did not work.
但是我发现Event.target 在 IE 中不起作用，我尝试将其更改为 java 脚本 addeventlistener，它没有用。
It throws error
它抛出错误
Uncaught ReferenceError: input is not defined
It is working in jQuery but it is not working in JS, Due to IE issue I need to change it to JS.
它在 jQuery 中工作，但在 JS 中不起作用，由于 IE 问题，我需要将其更改为 JS。
Can some one help
有人可以帮忙吗
回答by Adi
I found the problem to be in getElementsByTagNamemethod, you use this when you have a group of elements with the same tag name.
我发现问题出在getElementsByTagName方法中，当您有一组具有相同标签名称的元素时，您可以使用它。
Try this code below, it works
试试下面的代码，它有效
//HTML
<input id="inp" type="file" />
// JavaScript
document.getElementById('inp').addEventListener('change',prepareUpload,false);
function prepareUpload(event)
{
var files = event.target.files;
var fileName = files[0].name;
alert(fileName);
}
Below is the code if you want to do it for more than one element
如果您想为多个元素执行此操作，请使用以下代码
<body>
<input type="file" class="input"/>
<input type="file" class="input"/>
<input type="file" class="input"/>
<input type="file" class="input"/>
<script>
var inputArray = document.getElementsByClassName('input');
for(var i = 0; i < inputArray.length; i++){
inputArray[i].addEventListener('change',prepareUpload,false);
};
function prepareUpload(event)
{
var files = event.target.files;
var fileName = files[0].name;
alert(fileName);
}
</script>
</body>
回答by Sangram
This will work
这将工作
var fileName = $("input[type='file']").val().split('/').pop().split('\').pop();
回答by vapcguy
The code above is correct for all but IE simply because IE doesn't like event.target- you need event.srcElement: https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
上面的代码对除了 IE 之外的所有代码都是正确的，因为 IE 不喜欢event.target- 你需要event.srcElement：https: //developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
So something like this should sort that out:
所以像这样的事情应该解决这个问题：
var files;
if (window.navigator.userAgent.indexOf("MSIE ") > 0) ?
files = event.srcElement.files :
files = event.target.files;
I couldn't make that work in the "Run Snippet" thing SO has, though, so here's how you can just get it using another button:
但是，我无法在 SO 所拥有的“运行代码段”中完成这项工作，因此您可以使用另一个按钮来获取它：
document.getElementById('myBtn').addEventListener('click', function() {
doUpload();
});
function doUpload()
{
var myFile = myInput.files[0];
// can also use var myFile = document.querySelector('input').files[0];
var fileName = myFile.name;
alert(fileName);
}<input id="myInput" type="file" />
<button id="myBtn">Try Me</button>