Question

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

2015-01-12

46527

javascript jquery html internet-explorer

我已经在 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 script 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();

Sangram Chavan

2015-01-12

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 的“运行代码片段”中完成该操作，因此您可以使用另一个按钮来获取它：

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>