web-dev-qa-db-fra.com

Comment définir une valeur pour un fichier en HTML?

Remarque:

Les réponses et commentaires ci-dessous reflètent l'état des anciens navigateurs en 2009. Désormais, vous pouvez définir la valeur de l'élément d'entrée du fichier de manière dynamique/par programme à l'aide de JavaScript et d'un objet dataTransfer ou FileList 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 du fichier par programme (c'est-à-dire lorsque vous faites glisser des fichiers)?

Comment puis-je définir la valeur de cela?

<input type="file" />
javascripthtmlfile-uploadpreset
268
Alon Gubkin

Vous ne pouvez pas pour des raisons de sécurité.

Imaginer:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

Vous ne voulez pas que les sites Web que vous visitez puissent le faire, n'est-ce pas? =)

447
BalusC

Tu ne peux pas.

Le seul moyen de définir la valeur d'une entrée de fichier consiste à sélectionner un fichier.

Ceci est fait pour des raisons de sécurité. Sinon, vous seriez capable de créer un Javascript qui télécharge automatiquement un fichier spécifique à partir de l'ordinateur client.

114
Guffa

Ce n’est pas une réponse à votre question (à laquelle d’autres ont répondu), mais si vous souhaitez avoir une fonctionnalité d’édition d’un champ de fichier téléchargé, vous voudrez probablement:

  • affiche la valeur actuelle de ce champ en imprimant simplement le nom de fichier ou l'URL, un lien cliquable pour le télécharger, ou s'il s'agit d'une image: affichez-la simplement, éventuellement en miniature
  • la balise <input> pour télécharger un nouveau fichier
  • une case à cocher qui, lorsqu'elle est cochée, supprime le fichier actuellement chargé. notez qu'il n'y a aucun moyen de télécharger un fichier 'vide', vous avez donc besoin de quelque chose comme ceci pour effacer la valeur du champ
47
Wim

Tu ne peux pas. Et c'est une mesure de sécurité. Imaginez si quelqu'un écrit un JS qui définit la valeur d'entrée du fichier dans un fichier de données sensible

32
Eimantas

Comme tout le monde ici l'a dit: Vous ne pouvez pas télécharger un fichier automatiquement avec JavaScript.

TOUTEFOIS! Si vous avez accès aux informations que vous souhaitez envoyer dans votre code (c'est-à-dire pas passwords.txt), vous pouvez les télécharger en tant que type blob, puis les traiter en tant que fichiers.

Ce que le serveur finira par voir sera impossible à distinguer de quelqu'un qui définit réellement la valeur de <input type="file" />. Le truc, finalement, est de commencer un nouveau XMLHttpRequest () avec le serveur ...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);

        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');

        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };

        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});
0
HoldOffHunger

1) Le problème de la valeur par défaut dans une entrée de fichier IS N'EST PAS "fait pour des raisons de sécurité", mais les navigateurs "n'ont tout simplement pas réussi à l'implémenter, sans bonne raison": voir ceci deep report

2) Une solution simple peut être d’utiliser une entrée de texte en plus de l’entrée de fichier, comme ici . Bien sûr, vous avez besoin de code pour envoyer le fichier, en utilisant maintenant la valeur en saisie de texte et non celle en fichier.

Dans mon cas, faire une application HTA, ce n’est pas un problème, je n’utilise pas du tout le formulaire.

Cordialement M.s.

0
msillano