How to get the fileName in javascript from input file tag in IE browser
Question
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 answers
solution1
8 ACCPTED 2015-01-12 09:49:18
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>
solution2
1 2015-01-12 10:34:28
这会奏效
var fileName = $("input[type='file']").val().split('/').pop().split('\\').pop();
solution3
0 2018-04-05 00:07:46
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.