(indirect) avec javascript'/> (indirect) avec javascript'/> (indirect) avec javascript'/> Comment récupérer des fichiers depuis <input type = 'file' ... /> (indirect) avec javascript | abulletproofidea.com

Question Comment récupérer des fichiers depuis (indirect) avec javascript


J'ai un problème avec "tag d'entrée" dans les navigateurs non IE

<input type="file" ...

J'essaie d'écrire mon uploader, simplement en utilisant javascript et asp.net.

Je n'ai aucun problème à télécharger des fichiers.

Mon problème est survenu lorsque je voulais récupérer mes fichiers dans des navigateurs non IE avec

<input type="file" ...

Je ne veux pas utiliser directement de input parce que son apparence ne change pas correctement

J'ai écrit ce code pour récupérer les fichiers du disque dur:

function $tag(_str_tag) {
return document.getElementsByTagName(_str_tag);
}

function $create(_str_tag) {
    return document.createElement(_str_tag);
}


function $open_file() {
    _el_upload = $create("input");
    _el_body = $tag("body")[0];
    _el_upload.setAttribute("type", "file");
    _el_upload.style.visibility = "hidden";
    _el_upload.setAttribute("multiple", "multiple");
    _el_upload.setAttribute("position", "absolute");
    _el_body.appendChild(_el_upload);
    _el_upload.click();
    _el_body.removeChild(_el_upload);
    return _el_upload.files;
}

Dans IE, cela fonctionne plutôt bien et renvoie mes fichiers actuellement; Dans Chrome et Firefox, après avoir chargé le "dialogue de saisie de fichier", il ne peut retourner aucun fichier. Et Opera et Safari sont complètement sortis.

Je peux le réparer avec cette astuce, mais ce n'est pas bon au fond.

_el_upload.click();
alert();

Je pense que "callback" ou "wait function" peut résoudre ce problème, mais je ne peux pas le gérer.


14
2018-04-03 15:13


origine


Réponses:


Si vous cherchez à styler un élément d’entrée de fichier, regardez boîte de dialogue d'ouverture de fichier en javascript. Si vous cherchez à récupérer les fichiers associés à un élément d'entrée de fichier, vous devez faire quelque chose comme ceci:

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

Voir cet article MDN pour plus d'informations sur le FileList type.

Notez que le code ci-dessus ne fonctionnera que dans les navigateurs qui prennent en charge l'API de fichier. Pour IE9 et versions antérieures, par exemple, vous avez uniquement accès au nom de fichier. L'élément d'entrée n'a pas files propriété dans les navigateurs API non-fichier.


36
2018-04-03 16:29