web-dev-qa-db-fra.com

Définir dynamiquement la valeur d'une entrée de fichier

Existe-t-il un moyen de définir la valeur d'une entrée de fichier (<input type="file" />) ou est-ce que tout est bloqué pour des raisons de sécurité? J'essaie d'utiliser openFiles de Google Gears pour créer un simple multi-uploader.

Remarque:

Les réponses ci-dessous reflètent l'état des navigateurs hérités en 2009. Vous pouvez désormais définir la valeur de l'élément d'entrée de fichier de manière dynamique/par programmation à l'aide de JavaScript en 2017.

Voir la réponse dans cette question pour plus de détails ainsi qu'une démo:
Comment définir la valeur d'entrée de fichier par programme (c'est-à-dire lors du glisser-déposer des fichiers)?

javascripthtmldomgoogle-gears
66
Alex S

Il n'est pas possible de modifier dynamiquement la valeur d'un champ de fichier, sinon vous pouvez le définir sur "c:\votrefichier" et voler des fichiers très facilement.

Cependant, il existe de nombreuses solutions à un système de téléchargement multiple. Je suppose que vous voulez avoir une boîte de dialogue ouverte à sélection multiple.

Jetez peut-être un coup d'œil à http://www.plupload.com/ - c'est une solution très flexible pour les téléchargements de fichiers multiples, et prend en charge les zones de dépôt e.t.c.

66
Joel

Je travaille sur une application angular js et un comportement similaire à un problème similaire. Ce que j'ai fait a été d'afficher l'image à partir de la base de données, puis j'ai créé un bouton pour supprimer ou conserver l'image actuelle. Si l'utilisateur a décidé de conserver l'image actuelle, j'ai changé l'attribut ng-submit en une autre fonction qui ne nécessite pas de validation d'image et j'ai mis à jour l'enregistrement dans la base de données sans toucher le nom du chemin de l'image d'origine. La fonction remove image a également changé la valeur de l'attribut ng-submit retour à une fonction qui soumet le formulaire et inclut la validation et le téléchargement d'image. Aussi un peu de javascript pour faire glisser la vue pour télécharger une nouvelle image.

2
Richard - IMPI MEDIA

J'ai eu un problème similaire, puis j'ai essayé d'écrire cela à partir de JavaScript et cela fonctionne! : referenceToYourInputFile.value = "" ;

0
CESAR SORO

J'ai fini par faire quelque chose comme ça pour AngularJS au cas où quelqu'un tomberait sur cette question:

const imageElem = angular.element('#awardImg');

if (imageElem[0].files[0])
    vm.award.imageElem = imageElem;
    vm.award.image = imageElem[0].files[0];

Et alors:

if (vm.award.imageElem)
    $('#awardImg').replaceWith(vm.award.imageElem);
    delete vm.award.imageElem;
0
jstudios