Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Obrazek z input dynamicznie się pojawia
Ciubas
post
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
 
 Start new topic
Odpowiedzi
mortus
post
Post #2





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

Posty w temacie
- Ciubas   Obrazek z input dynamicznie się pojawia   7.07.2011, 14:18:23
- - wrotek   http://www.atwebresults.com/php_ajax_image_upload/   8.07.2011, 19:50:35
- - Ciubas   Mi nie zależy aby to wrzucał na serwer w sumie, ty...   9.07.2011, 12:35:52
- - kamil4u   Ze względów bezpieczeństwa nie jest to raczej możl...   9.07.2011, 13:25:13
- - Rid   CytatZe względów bezpieczeństwa nie jest to raczej...   9.07.2011, 14:12:48
- - Ciubas   Jakiego bezpieczeństwa? Skoro mogę wczytać obrazek...   9.07.2011, 14:33:19
- - mortus   Znalezione kiedyś w sieci:[HTML] pobierz, plaintex...   9.07.2011, 14:48:57
- - Ciubas   Na FF działa, na operze nie - ale to jest to o co ...   9.07.2011, 15:09:52
- - kamil4u   Zrobiłem najprostszy test: Kod<input type=...   10.07.2011, 19:13:33

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 6.10.2025 - 10:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn