Afficher l'image d'un input type=file : réalité ou fiction ?

Question

Serait-il possible d'afficher dans une balise IMG une image prête à être uploadée dans un input FILE ?

Réponse

Oui sous Safari, sans difficulté.

Oui sous Internet Explorer, via astuce.

Peut-être une astuce à trouver sous FireFox.

Non sous Opéra.

Code Source

Voici le code que j'utilise actuellement :

   1:  <html>
   2:      <head>
   3:          <title>To see an uploaded image</title>
   4:      </head>
   5:      <body>
   6:          <input type="file" onchange="onFileChange(this)" /><br/>
   7:          <img id="img" src="transparent.gif" />
   8:          <script>function onFileChange(input) {
   9:              if (window.ActiveXObject) {
  10:                  document.getElementById('img').style.filter='progid:DXImageTransform.Microsoft
.AlphaImageLoader(src="file://'
+input.value+'")';
  11:              } else {
  12:                  document.getElementById('img').src="file:///"+input.value;
  13:              }
  14:          }</script>
  15:      </body>
  16:  </html>

 

Compatibilité

Il marche sous IE (via l'utilisation du filtre DirectX AlphaImageLoader, IE interdisant normalement à une page sur un serveur d'accéder à un fichier sur l'ordinateur) et sous Safari (qui ne semble pas fournir de restriction anti-affichage de la zone locale)

Sous FireFox, le src de l'image est bien changé, mais tout comme sous IE, l'affichage de l'image est théoriquement interdit. Rien n'indique qu'une faille de sécurité permette d'afficher malgré tout l'image, mais je n'ai pas encore trouvé de solution.

EDIT : Une idée à creuser : utiliser une IFRAME avec about:blank ou data

Sous Opéra, seul le nom court du fichier est retourné, ce qui coupe court toute envie d'affichage de l'image via upload

Conclusion

Si vous souhaiter égayer votre upload d'image, cette soluce pourra vous satisfaire, si vous acceptez de limiter l'usage de la fonction à IE et Safari. Sans quoi, vous devrez passer votre chemin...

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Publié 17 février 08 09:10 par FREMYCOMPANY
Classé sous : ,

Commentaires

Pas de commentaires
Les commentaires anonymes sont désactivés

About FREMYCOMPANY

François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements