Okazuje się, że rozwiązanie powyższego problemu nie jest tak oczywiste jak mogłoby się wydawać.
Z przyczyn bezpieczeństwa większość przeglądarek(jak na razie jedynym wyjątkiem jaki znalazłem jest IE) uniemożliwia podejrzenie przez programistę JS pełnego parametru 'value' kontrolki input z typem "file". Jak zatem dostać się do pliku graficznego i wyświetlić go za pomocą JS jeszcze przed załadowaniem na serwer? Rozwiązaniem jest dobranie się do obrazka zapisanego w postaci base64(czyli po prostu surowych danych),utworzenie obiektu img oraz wyświetlenie go na ekranie. Koniec czczej pisaniny. Przed nami przykład.
1 <script type="text/javascript" src="pixastic.core.js"></script>
2 <script type="text/javascript" src="actions/resize.js"></script>
3 <script type="text/javascript">
4
5
6 function loadImage() {
7
8 var img = new Image();
9
10 img.onload = function() {
11
12 Pixastic.process(img, "resize", {
13 width : 100,
14 height : 100
15 });
16
17 }
18
19
20
21 var imgsource;
22
23 if(document.getElementById('filefield').files) {
24 imgsource = document.getElementById('filefield').files.item(0).getAsDataURL();
25 };
26
27
28 datastring = new String(imgsource);
29 mime = datastring.substring(0, 10);
30
31 if(mime=='data:image') {
32 img.src = imgsource;
33 document.getElementById('my').innerHTML="";
34
35 setTimeout(function() {
36 document.getElementById('my').appendChild(img);
37
38 }
39 ,50);
40
41 } else {alert("Niepoprawny typ pliku!!"); }
42
43
44 }
45
46 </script>
47
48 <html>
49
50 <head>
51 </head>
52
53 <body>
54
55 <span id='my'></span>
56
57 </body>
58 </html>
syntax highlighted by Code2HTML, v. 0.9.1
Wprawne oko zauważy, że w powyższym kodzie jest coś więcej niż tylko rozwiązanie problemu z tytułu. W istocie tak jest. W przykładzie zastosowałem bibliotekę 'Pixastic'(wiele ciekawych zastosowań - polecam), które posłużyła mi do stworzenia miniaturki obrazka. Dodatkowo kod zawiera zabezpieczenie przed omyłkowym wprowadzeniem pliku który nie zawiera grafiki a także timeout który daje czas na zmniejszenie obrazka. Jeśli ktoś jest ciekawy co się stanie bez timeoutu i po zmianie innych opcji - zapraszam do eksperymentowania.
Aktualizacja: Okazuje się, że zaprezentowana metoda działa jedynie w FF3!!
Jeśli uda mi się znaleźć jakiś bardziej uniwersalny sposób(w co wątpię) lub chociaż
obejścia dla innych przeglądarek coś o tym napiszę.
Do przeczytania
Pixastic
Base64
Inspiracja powyższej notki - dla znających j.francuski
Brak komentarzy:
Prześlij komentarz