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;

我无法在＆＃34; Run Snippet＆＃34;但是，事情就是如此，所以你可以用另一个按钮来获取它：

＆＃13;

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

＆＃13;

<input id="myInput" type="file" />
<button id="myBtn">Try Me</button>

＆＃13;

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

3 个答案: