Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3010 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Javascript/HTML] Afficher une image local

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Javascript/HTML] Afficher une image local

n°1347301
jzetax
Posté le 15-04-2006 à 00:36:44  profilanswer
 

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
mood
Publicité
Posté le 15-04-2006 à 00:36:44  profilanswer
 

n°1347314
nargy
Posté le 15-04-2006 à 01:39:28  profilanswer
 

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

n°1347317
jzetax
Posté le 15-04-2006 à 01:44:27  profilanswer
 

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

n°1347320
nargy
Posté le 15-04-2006 à 01:57:40  profilanswer
 

oui

n°1347321
nargy
Posté le 15-04-2006 à 01:58:46  profilanswer
 

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

n°1347322
nargy
Posté le 15-04-2006 à 01:59:41  profilanswer
 

essaye avec getElementById()

n°1347323
jzetax
Posté le 15-04-2006 à 02:10:07  profilanswer
 

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à...

n°1347325
nargy
Posté le 15-04-2006 à 02:15:41  profilanswer
 

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

n°1347326
jzetax
Posté le 15-04-2006 à 02:16:35  profilanswer
 

elle fonctionne parfaitement.

n°1347327
jzetax
Posté le 15-04-2006 à 02:17:52  profilanswer
 

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

mood
Publicité
Posté le 15-04-2006 à 02:17:52  profilanswer
 

n°1347328
nargy
Posté le 15-04-2006 à 02:17:55  profilanswer
 

tu peut poster un peu plus de code?

n°1347329
nargy
Posté le 15-04-2006 à 02:18:35  profilanswer
 

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

n°1347330
jzetax
Posté le 15-04-2006 à 02:21:51  profilanswer
 

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...

n°1347331
nargy
Posté le 15-04-2006 à 02:25:25  profilanswer
 

tu testes avec quel navigateur?

n°1347333
jzetax
Posté le 15-04-2006 à 02:27:48  profilanswer
 

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.

n°1347334
nargy
Posté le 15-04-2006 à 02:30:21  profilanswer
 

quelques idées:
 

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

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

n°1347335
nargy
Posté le 15-04-2006 à 02:31:15  profilanswer
 

regarde aussi la console javascript

n°1347339
nargy
Posté le 15-04-2006 à 02:35:52  profilanswer
 

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

n°1347340
jzetax
Posté le 15-04-2006 à 02:36:19  profilanswer
 

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?

n°1347341
nargy
Posté le 15-04-2006 à 02:39:39  profilanswer
 

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

n°1347342
jzetax
Posté le 15-04-2006 à 02:44:17  profilanswer
 

donc mon code ne fonctionne pas...

n°1347343
jzetax
Posté le 15-04-2006 à 02:48:37  profilanswer
 

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
n°1347344
nargy
Posté le 15-04-2006 à 02:49:44  profilanswer
 

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

n°1347345
nargy
Posté le 15-04-2006 à 02:50:51  profilanswer
 

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

n°1347346
jzetax
Posté le 15-04-2006 à 02:53:22  profilanswer
 

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.

n°1347347
jzetax
Posté le 15-04-2006 à 02:54:14  profilanswer
 

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

n°1347350
nargy
Posté le 15-04-2006 à 03:18:49  profilanswer
 

cool :)

n°1347364
gatsu35
Blablaté par Harko
Posté le 15-04-2006 à 08:30:52  profilanswer
 

[: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>

n°1347372
nargy
Posté le 15-04-2006 à 09:44:13  profilanswer
 

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

n°1347403
jzetax
Posté le 15-04-2006 à 11:37:26  profilanswer
 

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.

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Javascript/HTML] Afficher une image local

 

Sujets relatifs
couper une chaine html sans couper de tags[JavaScript/XML] XMLHttpRequest pour atteindre un fichier distant ?
AIDE JavascriptAide Javascript Expression reg
[JavaScript/XML] Parser un fichier XML en variable arbre[JavaScript] Boite confirm - Annuler par defaut ?
Autoriser d'afficher la page que pour ceux venant d'une page définie image invisible sous mozilla
Pb ancres - mail htmlFormulaire HTML vers PHP
Plus de sujets relatifs à : [Javascript/HTML] Afficher une image local

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.110 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR