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

Question

我在 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 does not work in IE，我尝试将其更改为java脚本addeventlistener，但没有用。

它抛出错误

Uncaught ReferenceError: input is not defined

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

谁能帮忙

Answer 1

我发现问题出在 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>

Answer 2

这会起作用

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

Answer 3

上面的代码对除 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 拥有的 "Run Snippet" 中完成这项工作，所以这里是您可以使用另一个按钮获得它的方法：

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>

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

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

html

javascript

jquery

internet-explorer