Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 886
Hitesh Avatar asked Jan 12 '15 09:01

Hitesh


2 Answers

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>
like image 137
Adi Avatar answered Oct 27 '22 00:10

Adi


This will work

var fileName = $("input[type='file']").val().split('/').pop().split('\\').pop();
like image 35
Sangram Chavan Avatar answered Oct 27 '22 00:10

Sangram Chavan