How to get the fileName in javascript from input f

2019-01-26 18:05发布

站内问答 / JavaScript
1425 3 4

I have done this in jQuery, to get filename from input file tag, With jQuery it works perfectly. 

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

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.

Can some one help

3条回答
乱世女痞
2楼-- · 2019-01-26 18:12

I found the problem to be in getElementsByTagName method, you use this when you have a group of elements with the same tag name.

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>
查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2019-01-26 18:19

This will work

var fileName = $("input[type='file']").val().split('/').pop().split('\\').pop();
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2019-01-26 18:35

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

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:

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)