Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrazek z input dynamicznie się pojawia
Forum PHP.pl > Forum > Po stronie przeglądarki
Ciubas
7.07.2011, 14:18:23
witam,

mam pytanie mam taki formularz:

[HTML] pobierz, plaintext 
  1.  ..
  2. <p><label for="picture">Picture</label><input type="file" name="picture" /></p>
  3. <p><input type="submit" value="Create" /></p>
  4. ..
[HTML] pobierz, plaintext


Czy da się zrobić tak aby obrazek od razu się pojawiał? Czyli wczytywał dynamicznie z dysku po przez js a nie przeładowanie strony?

Potrzebuję odczytać z obrazka klika rzeczy które wprowadzam na resztę formularza i to znacznie ułatwiło by mi zadanie.
wrotek
8.07.2011, 19:50:35
http://www.atwebresults.com/php_ajax_image_upload/
Ciubas
9.07.2011, 12:35:52
Mi nie zależy aby to wrzucał na serwer w sumie, tylko lokalnie czytał z dysku - czyli aby ścieżka do pliku z pola <input> dynamicznie została wczytana gdzieś obok do <img src=""/> - macie jakiś pomysł?
kamil4u
9.07.2011, 13:25:13
Ze względów bezpieczeństwa nie jest to raczej możliwe smile.gif
Rid
9.07.2011, 14:12:48
Cytat
Ze względów bezpieczeństwa nie jest to raczej możliwe

Przecież ,banery reklamowe zmieniają obrazy co jakiś czas,więc dynamiczne wczytywanie obrazów, chyba jest możliwe.
Ciubas
9.07.2011, 14:33:19
Jakiego bezpieczeństwa? Skoro mogę wczytać obrazek:

<img src="C:/dysk/obrazek.jpg"/> to musi się dać zmienić to przez js na obrazek3.jpg

No chyba, że ja nie rozumiem czym jest bezpieczeństwo...
mortus
9.07.2011, 14:48:57
Znalezione kiedyś w sieci:
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             <!--
  5.             // Begin
  6.             /* This script and many more are available free online at
  7.              The JavaScript Source!! <a href="http://javascript.internet.com" target="_blank">http://javascript.internet.com</a>
  8.              Created by: Abraham Joffe :: <a href="http://www.abrahamjoffe.com.au/" target="_blank">http://www.abrahamjoffe.com.au/</a> */
  9.             /***** CUSTOMIZE THESE VARIABLES *****/
  10.             // width to resize large images to
  11.             var maxWidth = 500;
  12.             // height to resize large images to
  13.             var maxHeight = 500;
  14.             // valid file types
  15.             var fileTypes = ["bmp", "gif", "png", "jpg", "jpeg"];
  16.             // the id of the <strong class="highlight">preview</strong> <strong class="highlight">image</strong> tag
  17.             var outImage = "previewField";
  18.             // what to display when the <strong class="highlight">image</strong> is not valid
  19.             var defaultPic = "spacer.gif";
  20.             /***** DO NOT EDIT BELOW *****/
  21.             function preview(what){
  22.                 var source = what.value;
  23.                 var ext = source.substring(source.lastIndexOf(".") + 1, source.length).toLowerCase();
  24.                 for (var i = 0; i < fileTypes.length; i++) {
  25.                     if (fileTypes[i] == ext) {
  26.                         break;
  27.                     }
  28.                 }
  29.                 globalPic = new Image();
  30.                 if (i < fileTypes.length) {
  31.  
  32.                     //Obtenemos los datos de la imagen de firefox
  33.                     try {
  34.                         globalPic.src = what.files[0].getAsDataURL();
  35.                     } 
  36.                     catch (err) {
  37.                         globalPic.src = source;
  38.                     }
  39.                 }
  40.                 else {
  41.                     globalPic.src = defaultPic;
  42.                     alert("ESTA NO ES UNA IMAGEN VALIDA por favor escoge una imagen de tipo:nn" + fileTypes.join(", "));
  43.                 }
  44.                 setTimeout("applyChanges()", 200);
  45.             }
  46.  
  47.             var globalPic;
  48.             function applyChanges(){
  49.                 var field = document.getElementById(outImage);
  50.                 var x = parseInt(globalPic.width);
  51.                 var y = parseInt(globalPic.height);
  52.                 if (x > maxWidth) {
  53.                     y *= maxWidth / x;
  54.                     x = maxWidth;
  55.                 }
  56.                 if (y > maxHeight) {
  57.                     x *= maxHeight / y;
  58.                     y = maxHeight;
  59.                 }
  60.                 field.style.display = (x < 1 || y < 1) ? "none" : "";
  61.                 field.src = globalPic.src;
  62.                 field.width = x;
  63.                 field.height = y;
  64.             }
  65.  
  66.             // End -->
  67.         </script>
  68.     </head>
  69.     <body>
  70.     	<p>Pre-veiw pic from your drive</p> 
  71.         <input type="file" id="picField" onchange="preview(this)">
  72.         <img alt="Graphic will preview here" id="previewField" src="http://i14.photobucket.com/ssalbums/a345/Instar/eye_search_e0.gif">
  73.     </body>
  74. </html>
[HTML] pobierz, plaintext
Ciubas
9.07.2011, 15:09:52
Na FF działa, na operze nie - ale to jest to o co mi chodziło - bardzo dziękuje za pomoc!

Teraz tylko to zmodyfikować pod siebie i czary będą realne biggrin.gif
kamil4u
10.07.2011, 19:13:33
Zrobiłem najprostszy test:
Kod
<input type="file" onchange="alert(this.value)">


Kod ten wyświetla jedynie "część" ścieżki do pliki(FF - może starsze przeglądarki pokażą pełną ścieżkę), a dokładnie tylko jego nazwę - skoro tak jest to pewnie jest to związane z bezpieczeństwem( żeby nie było wiadomo, gdzie użytkownik trzyma pliki - moje domysły) stąd mój post.

Kod ~mortusa działa trochę inaczej(i tylko dla FF). Sam zobacz, że nie wyświetlana jest pełna ścieżka, a sam plik:
Kod
<input type="file" onchange="alert(this.files[0].getAsDataURL() );>


Stwierdziłem zatem, że skoro nie da się tego zrobić dla wszystkich przeglądarek to nie da się tego zrobić - zastosuj ajax + upload pliku(chyba nie musisz zapisywać obrazka na serwerze( w PHP dawno się nie bawiłem) - http://forum.webhelp.pl/php-i-bazy-danych/...on-t199853.html )

@Rid: Ty mówisz po prostu o
Kod
new Image
- moim zdaniem o czymś innym
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.