如何从IE浏览器中的输入文件标签中获取javascript中的文件名

How to get the fileName in javascript from input file tag in IE browser

本文关键字：标签 获取 javascript 文件名 文件 输入 IE 浏览器      更新时间：2023-09-26

我已经在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" />

但是我发现Event.target在IE中不起作用，我试图将其更改为java脚本addeventlistener，它不起作用。

它抛出错误

Uncaught ReferenceError: input is not defined

它在jQuery中工作，但在JS中不起作用，由于IE问题，我需要将其更改为JS。

有人可以帮忙吗

我发现问题出在getElementsByTagName方法中，当您有一组具有相同标签名称的元素时，您可以使用此方法。

试试下面的代码，它可以工作

//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);
}

下面是代码，如果你想为多个元素做

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

这将起作用

var fileName = $("input[type='file']").val().split('/').pop().split('''').pop();

上面的代码对除IE以外的所有代码都是正确的，仅仅是因为IE不喜欢event.target - 你需要event.srcElement：https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

所以像这样的事情应该解决这个问题：

var files;
if (window.navigator.userAgent.indexOf("MSIE ") > 0) ? 
    files = event.srcElement.files :
    files = event.target.files;

不过，我无法在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>

相关文章：