Hehe... Mój pierwszy temat w Newbie tak jak się spodziewałem, będzie dotyczył JS. Nie znam dobrze JS (opanowałem totalne podstawy, bo mi były potrzebn do pisanej stronki, żeby ładnie wyglądała), nie chce mi się tego tak dogłębnie uczyć (opanowałem jeden kurs i myślę, że wystarczy na razie), ale mam problem, którego na moim aktualnym poziomie wiedzy z tego języka nie jestem w stanie rozwiązać. A problem mam następujący:
Chcę stworzyć formularz do dodawania notek do bloga (długa historia dlaczego, ale to konieczność ;) ). I problem tkwi w dodawaniu obrazków do notek. Myślałem, żeby zrobić to tak: Klikam w guzik "Dodaj obrazek". I teraz dynamicznie tworzy mi się pole typu FILE (najlepiej, jakby było niewidoczne) i "klika się" guziczek Browse (w polskich przeglądarkach "Przeglądaj". No i teraz jak ktoś wybierze pliczek graficzny z dysku, to żeby skrypt pytał się o tekst w "ALT" obrazka. No i jak już user wpisze ten tekścik, to żeby dodawał do TEXTAREA odpowiedni znacznik IMG z SRC="jakiś zdefiniowany z góry katalog/nazwa pliku" i ALT="Podany przez usera ALT". No i pytanie brzmi: Jak zrobić tak, żeby po kliknięciu w guzik "Dodaj Obrazek" automatycznie otwierało się okienko Browse i potem pytanie o ALT, oraz jak odczytać nazwę pliku z takiego pola typu FILE? Domyślam się, że to proste, ale mi to sprawia kłopot.
Z góry dzięki za odpowiedzi.
//Heh, temat siedzi tu od jakiegoś czasu, sporo wyświetleń i nic... Może jednak to nie jest takie proste i powinno siępojawić w dziale JS??
//Wrzuciłem to tutaj, bo po dniu nikt w NewBie nie odpowiadał - AP :>
Ogólnie to się nie da, łatwiej, profesjonalniej itp. jest to zrobić tak jak to jest na Allegro przy dodawaniu obrazka, bo i tak trzeba użyć PHP do uploadowania obrazków na serwer no chyba że je wczesniej uploadujesz a skrypt tylko spyta promptem o url i alt dla obrazka i wyśle. Ewentualnie możesz zrobić coś w tym stylu:
<html><body>
<form name=forma action="http://serwer/skrypt/uploadowania_obrazkow.php" METHOD="POST" ENCTYPE="multipart/form-data">
<script language=JavaScript><!--
function strrpos(wczym,co){
i=-1;
while(wczym.indexOf(co,i+1)>=0) i=wczym.indexOf(co,i+1);
return i;
}
function filename(nazwa){
return nazwa.substr(strrpos(nazwa.replace(/\\/g,'/'),'/')+1,nazwa.length);
}
function pytajoalt(){
a=prompt('Podaj alt obrazka:',filename(document.forms.forma.plik.value));
if(a!=null){
document.forms.forma.altObrazka.value=a;
return true;
} else return false;
}
//--></script>
<input type=file name=plik onChange="pytajoalt()" style="visibility:hidden;position:absolute">
<input type=hidden name="altObrazka">
<input type=submit name=wyslij value="Wyślij">
</form>
</body></html>
ale działa to tylko na MSIE (przetestowane tylko na 6.0) i nie działa automatyczne submittowanie bo wyskakuje błąd dostępu, możesz to zrobić tak że zostanie standardowe pole typu "file" bez ukrywania:
<input type=file name=plik onChange="if(pytajoalt()) document.forms.forma.submit()">
więc możesz to zrobić tą formę w iframe'ie lub w target ustawionym na ramkę o wielkośći 1px/1px, a w funkcji pytajoalt dodać jeszcze
document.forms.taDrugaPodstawowaForma.textarea.value+='<img src=http://mojserwer/sciezka/gdzie/to/sie/uploaduje/'+filename(document.forms.forma.plik.value)+' alt='+a+'>';
ale wymagać to będzie od usera kliknięcia na przycisk "Kliknij", wybrania pliku, wpisania alta, kliknięcia na "wyślij" i dalszego robienia se posta/newsa/czy jak to tam nazwać i posiadania do tego MSIE 6.0
Jak zrobić tak, żeby po kliknięciu w guzik "Dodaj Obrazek" automatycznie otwierało się okienko Browse i potem pytanie o ALT, oraz jak odczytać nazwę pliku z takiego pola typu FILE?
<script>
function get_file(frm_id){
var doc, frm, elt
doc = document
frm = doc.getElementById(frm_id)
elt = doc.createElement('input')
elt.type = 'file'
elt.style.display = 'none'
frm.appendChild(elt)
elt.click()
if (! elt.value) frm.removeChild(elt)
return elt.value
}
function get_alt(){
return prompt('Podaj alt dla obrazka:','')
}
function add_img(){
var filename = get_file('formularz')
if (! filename) return
var imgalt = get_alt()
if (! imgalt) return
alert(filename + ' ' + imgalt)
// reszte juz sobie sam dopisz...
}
</script>
<form id="formularz">
<input type="button" value="Dodaj obrazek" onclick="add_img()">
</form>
Niestety IE Only a to wszystko przez metode click() pola file ktora powoduje uruchomienie przycisku przegladaj jedynie w IE...
No tak, ale w takiej sytuacji uzytkownik korzystajacy z innej niz IE przegladarki bedzie musial kliknac na Browse recznie, czy w ogóle nie zadziala cos takiego?
Przepraszam za brak polskich liter, ale pisze spod mozilli 0.9.2.1 pod Linuxem RH 7.2 bez zainstalwanej polskiej klawiatury i z maszyny o zawrotnej czestotliwosci pracy procesora 133 MHz :D