Hit*_*esh 5 html javascript jquery 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);
}Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />Run Code Online (Sandbox Code Playgroud)
但我发现Event.target在IE中不起作用,我试图将其改为java脚本addeventlistener,它没有用.
它抛出错误
Uncaught ReferenceError: input is not defined
Run Code Online (Sandbox Code Playgroud)
它在jQuery中工作,但它在JS中不起作用,由于IE问题,我需要将其更改为JS.
有人可以提供帮助
我发现问题出在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);
}
Run Code Online (Sandbox Code Playgroud)
如果您想为多个元素执行此操作,则下面是代码
<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>
Run Code Online (Sandbox Code Playgroud)