Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Obrazek z input dynamicznie się pojawia
Ciubas
post 7.07.2011, 14:18:23
Post #1





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 14.09.2003
Skąd: K-ce

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
wrotek
post 8.07.2011, 19:50:35
Post #2





Grupa: Zarejestrowani
Postów: 20
Pomógł: 1
Dołączył: 6.07.2011

Ostrzeżenie: (0%)
-----

http://www.atwebresults.com/php_ajax_image_upload/
Go to the top of the page
+Quote Post
Ciubas
post 9.07.2011, 12:35:52
Post #3





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 14.09.2003
Skąd: K-ce

Ostrzeżenie: (0%)
-----

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ł?
Go to the top of the page
+Quote Post
kamil4u
post 9.07.2011, 13:25:13
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

Ze względów bezpieczeństwa nie jest to raczej możliwe smile.gif


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Rid
post 9.07.2011, 14:12:48
Post #5





Grupa: Zarejestrowani
Postów: 715
Pomógł: 47
Dołączył: 5.12.2010

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Rid 9.07.2011, 14:13:33
Go to the top of the page
+Quote Post
Ciubas
post 9.07.2011, 14:33:19
Post #6





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 14.09.2003
Skąd: K-ce

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
mortus
post 9.07.2011, 14:48:57
Post #7





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Ciubas
post 9.07.2011, 15:09:52
Post #8





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 14.09.2003
Skąd: K-ce

Ostrzeżenie: (0%)
-----

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


Ten post edytował Ciubas 9.07.2011, 15:58:59
Go to the top of the page
+Quote Post
kamil4u
post 10.07.2011, 19:13:33
Post #9





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.07.2025 - 13:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn