Comment obtenir le nom de fichier en javascript à partir du fichier d'entrée de la balise dans le navigateur IE

Je l'ai fait en jQuery, pour obtenir le nom de fichier du fichier d'entrée de la balise, Avec jQuery, il fonctionne parfaitement.

JS:

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

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />

Mais j'ai trouvé De l'événement.la cible ne fonctionne pas sous IE, j'ai essayé de changer java script addeventlistener, il n'a pas de travail.

Il déclenche une erreur

Uncaught ReferenceError: input is not defined

Il travaille en jQuery mais ça ne fonctionne pas en JS, en Raison de IE j'ai besoin de la changer en JS.

Peut-on aider

InformationsquelleAutor Hitesh | 2015-01-12
  1. 7

    J'ai trouvé le problème pour être en getElementsByTagName méthode, vous utilisez cette option lorsque vous avez un groupe d'éléments avec le même nom de balise.

    Essayer ce code ci-dessous, il fonctionne

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

    Ci-dessous est le code si vous voulez le faire pour plus d'un élément

    <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>
    • J'ai plusieurs fichier d'entrée de la balise et souhaitez l'utiliser pour tous les fichier d'entrée de la balise , comme la façon dont j'ai utilisé jQuery dans le jQuery('input[type=file]').on('change', prepareUpload);
    • Est-il possible en Java script ou autre chose, je vais aller avec l'Id concept
    • Je vous suggère d'aller avec jQuery pour des raisons de confort, mais si vous voulez vraiment apprendre à travailler avec getElementsByTagName, voici comment vous pourriez le faire. getElementsByTagName retourne un tableau alors vous pouvez faire une boucle sur le tableau pour définir un eventListener à chaque élément, et vous êtes bon pour aller.
    • Lisez la question s'il vous plaît, je l'ai déjà fait en jQuery, La raison pour laquelle je suis en train de l'essayer en java script, en raison de l'événement.la cible n'est pas de travail dans IE
    • merci pour vos efforts 🙂 @Adi
    • merci pour la réponse , mais Est-il possible à l'aide de la BALISE ? .. sinon, je vais utiliser getElementsByClassName. Merci encore
    • votre réponse est juste, mais il ne fonctionne pas sous IE 🙁
    • il déclenche une erreur dans IE 9 Unable to get property '0' of undefined or null reference pour cette ligne fileName = files[0].name;
    • Jetez un oeil à stackoverflow.com/questions/10813494/... question qu'il pourrait avoir quelque réponse
    • Vous ne voulez pas courir à travers toutes vos entrées à 1 fois, avec une seule fonction. Vous devriez faire le traitement d'un fichier chaque fois qu'un fichier est ajouté à l'entrée. Vous pouvez ajouter les auditeurs à chaque entrée & ont tout point à la même fonction, ce serait la même chose que votre jQuery, mais il est encore de les traiter un à un, par changement de l'événement. Le code de cette réponse est correcte pour tous, mais IE tout simplement parce que IE n'aime pas event.target - vous besoin de quelque chose comme if (window.navigator.userAgent.indexOf("MSIE ") > 0) { var files = event.srcElement.files; var name = files[0].name; }

    InformationsquelleAutor Adi
  2. 1

    Cela fonctionne

    var fileName = $("input[type='file']").val().split('/').pop().split('\\').pop();
    • Je veux qu'il en JS pas de jQuery , Merci pour la réponse
    InformationsquelleAutor Sangram
  3. 0

    Le code ci-dessus est correcte pour tous, mais IE tout simplement parce que IE n'aime pas event.target - vous besoin event.srcElement: https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

    Donc quelque chose comme cela devrait régler ça:

    var files;

if (window.navigator.userAgent.indexOf("MSIE ") > 0) ? 
    files = event.srcElement.files :
    files = event.target.files;

    Je ne pouvais pas faire ce travail dans la "course" Extrait de chose SI a, alors voici comment vous pouvez juste obtenir à l'aide d'un autre bouton:

    JS:

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

    HTML:

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

    InformationsquelleAutor vapcguy