[Javascript/HTML] Afficher une image local

Afficher une image local [Javascript/HTML] - HTML/CSS - Programmation

Marsh Posté le 15-04-2006 à 00:36:44    

Bonjour tout le monde,
 
Je suis face à un problème je veux créer un aperçu d'une image que je veux uploader, je veux donc afficher celle ci qui est en local. Le problème c'est que je n'arrive pas à afficher une image en locale je ne comprend pas d'où peut venir le soucis.  
L'adresse en local étant file:///url/du/fichier

Citation :

<form method=post action=#>
  <input type="file" name="fichier" value="" onChange="document.images.apercu.src='file://'+this.value"/>
  </form>
  <img name="apercu" src="" alt=""/>


Message édité par jzetax le 15-04-2006 à 00:37:57
Reply

Marsh Posté le 15-04-2006 à 00:36:44   

Reply

Marsh Posté le 15-04-2006 à 01:39:28    

La méthode fonctionne avec FF+Linux.
Je soupçonne que sous windows tu ai à changer ``C:`` en ``C|``.

Reply

Marsh Posté le 15-04-2006 à 01:44:27    

je ne suis pas sous windows je suis sous linux. tu as copié collé le code et ça fonctionne?

Reply

Marsh Posté le 15-04-2006 à 01:57:40    

oui

Reply

Marsh Posté le 15-04-2006 à 01:58:46    

c'est peut être document.images.apercu qu'il ne trouve pas avec mozilla.

Reply

Marsh Posté le 15-04-2006 à 01:59:41    

essaye avec getElementById()

Reply

Marsh Posté le 15-04-2006 à 02:10:07    

cette méthode aussi ne fonctionne pas. Pourtant elles sont équivalentes.
 
il y a une chose que je ne comprend pas même si je mets une url fixe tel que src="file:///home/zetax/vtt.jpg" il ne me l'affiche pas les droits d'écriture etc sont bon pourtant, j'ai aussi essayé avec epyphany mais toujours pareil je sèche sur ce coup là...

Reply

Marsh Posté le 15-04-2006 à 02:15:41    

essaye tout simplement la commande shell:
firefox file:///home/zetax/vtt.jpg

Reply

Marsh Posté le 15-04-2006 à 02:16:35    

elle fonctionne parfaitement.

Reply

Marsh Posté le 15-04-2006 à 02:17:52    

ça peut venir d'une mauvaise compilation de apache du genre s'il manque des flags?

Reply

Marsh Posté le 15-04-2006 à 02:17:52   

Reply

Marsh Posté le 15-04-2006 à 02:17:55    

tu peut poster un peu plus de code?

Reply

Marsh Posté le 15-04-2006 à 02:18:35    

> compilation de apache
non, c'est le navigateur qui charge l'image en local

Reply

Marsh Posté le 15-04-2006 à 02:21:51    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>interface</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <link rel="stylesheet" type="text/css" href="interface.css"/>
  7. </head>
  8. <body>
  9. <div id="page">
  10. <div id="top">
  11. </div>
  12. <div id="main">
  13.  <div id="content">
  14.  <form method=post action=#>
  15.  <input type="file" name="fichier" value="" onChange="document.getElementById('apercu').src='file://'+this.value;"/>
  16.  </form>
  17.  <img id="apercu" src="" alt=""/>
  18.  </div>
  19. </div>
  20. <div id="sidebar">
  21.  <div id="menu_droite">
  22.  <table id="menu"  border="0" cellpadding="0" cellspacing="0">
  23.  <tr>
  24.  <td><img src="images/interface_03.png" onmouseover="this.src='images/interface_03_2.png';" onmouseout="this.src='images/interface_03.png';" alt=""/></td>
  25.  </tr>
  26.  <tr>
  27.  <td><img src="images/interface_04.png" onmouseover="this.src='images/interface_04_2.png';" onmouseout="this.src='images/interface_04.png';" alt=""/></td>
  28.  </tr>
  29.  <tr>
  30.  <td><img src="images/interface_05.png" onmouseover="this.src='images/interface_05_2.png';" onmouseout="this.src='images/interface_05.png';" alt=""/></td>
  31.  </tr>
  32.  <tr>
  33.  <td><img src="images/interface_06.png" onmouseover="this.src='images/interface_06_2.png';" onmouseout="this.src='images/interface_06.png';" alt=""/></td>
  34.  </tr>
  35.  </table>
  36.  </div>
  37. </div>
  38. <table id="footer2" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>Original design &amp; code by zetax | 2004-2006 </td><td><img src="images/x.png" onmouseover="this.src='images/x_on.png';" onmouseout="this.src='images/x.png';" alt=""/><img src="images/c.png" onmouseover="this.src='images/c_on.png';" onmouseout="this.src='images/c.png';" alt=""/></td></tr></table>
  40. </div>
  41. </body>
  42. </html>


je t'ai copié la page entière mais je doute quelle t'aide beaucoup plus...

Reply

Marsh Posté le 15-04-2006 à 02:25:25    

tu testes avec quel navigateur?

Reply

Marsh Posté le 15-04-2006 à 02:27:48    

je teste avec firefox 1.5.0.1 et j'ai teste avec epyphany mais je ne sais pas quel moteur il utilise ce sont les seuls que j'ai sous la main.

Reply

Marsh Posté le 15-04-2006 à 02:30:21    

quelques idées:
 

  • onChange="javacript:blabla"
  • retourne true ou false dans le onChange
  • vire src=""
  • essaye sans /

           <img id="apercu" src="" alt=""/>

Reply

Marsh Posté le 15-04-2006 à 02:31:15    

regarde aussi la console javascript

Reply

Marsh Posté le 15-04-2006 à 02:35:52    

moi j'ai FF 1.0.1
ça ne fonctionne ni avec konqueror, ni avec opéra

Reply

Marsh Posté le 15-04-2006 à 02:36:19    

ah :

Citation :

Security Error: Content at http://localhost/site/formulaire.php may not load or link to file:///home/zetax/06-04-07.jpg.


et toi tu as quoi comme navigateur?

Reply

Marsh Posté le 15-04-2006 à 02:39:39    

ouais, ça y est j'ai pigé:
j'ai ajouté window.status=this.value;
et ça m'a donné le nom du fichier sans son path.
En fait c'était un bug de sécurité de FF1.0.1

Reply

Marsh Posté le 15-04-2006 à 02:44:17    

donc mon code ne fonctionne pas...

Reply

Marsh Posté le 15-04-2006 à 02:48:37    

j'ai trouvé la solution  
 

Citation :

   user_pref("capability.policy.policynames", "localfilelinks" );
    user_pref("capability.policy.localfilelinks.sites", "http://www.example.com" );
    user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess" );


c'est bloqué par défault, on peut autoriser l'accès au compte gouttes...


Message édité par jzetax le 15-04-2006 à 02:49:41
Reply

Marsh Posté le 15-04-2006 à 02:49:44    

ouais.. fait l'upload avant de faire une preview :(

Reply

Marsh Posté le 15-04-2006 à 02:50:51    

> c'est bloqué par défault, on peut autoriser l'accès au compte gouttes...
- tu peut toujours essayer..

Reply

Marsh Posté le 15-04-2006 à 02:53:22    

justement c'est histoire de faire un preview en local et vue de l'upload.
L'important c'est que ça fonctionne :) je pense que je vais suivre ton conseil, ça risque de poser des problème pour les visiteurs. merci de ton aide.

Reply

Marsh Posté le 15-04-2006 à 02:54:14    

oui ça fonctionne comme tu l'avais dit c'est que pb de sécurité qui a été corrigé.

Reply

Marsh Posté le 15-04-2006 à 03:18:49    

cool :)

Reply

Marsh Posté le 15-04-2006 à 08:30:52    

[:petrus75]

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6.    <script>
  7.    function checkimg(objfile) {
  8.      var img =  document.getElementById("imgchg" );
  9.      img.src = objfile.value;
  10.         img.style.display = "block";
  11.    }
  12.  
  13.    </script>
  14. </head>
  16. <body>
  19. <input onchange="checkimg(this)" type="file">
  20. <img id="imgchg" src="" style="display:none">
  21. </body>
  22. </html>

Reply

Marsh Posté le 15-04-2006 à 09:44:13    

Gatsu35> on a essayé ça, mais en fait ça passe pas sur tous les navigateurs, la méthode exploite une faille de sécurité.

Reply

Marsh Posté le 15-04-2006 à 11:37:26    

gatsu35 la solution est d'autoriser les links vers les fichiers locaux. Pour se faire il faut modifier le user.js dans son profile de firefox et d'y ajouter les trois lignes suivantes

Citation :

user_pref("capability.policy.policynames", "localfilelinks" );
user_pref("capability.policy.localfilelinks.sites", "http://www.example.com" );
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess" );


http://www.example.com étant le ou les sites que l'on veut autoriser.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed