File input ველი html-ში

ბლოგზე მაინც დავწერო რამე, გულს გადავაყოლებ..

ყველაზე ბოლოს რაც მახსოვს, html file input-ის ღილაკზე მინდოდა სტილის დადება (არ მითხრათ flash-ით გექნაო :D)

ნუ, თურმე, რაც არ უნდა თავი მოიკლას კაცმა, მაგ ღილაკს სტილს ვერ შეუცვლის.. ვერც ტექსტს (choose file…). ამ ტექსტს ბრაუზერი სვამს და თან სხვადასხვა ბრაუზერში სხვადასხვაა ხოლმე.

გუგლმა რაღაც ჰაკებამდე მიმიყვანა.. ხალხი css-ით და javascript-ით აღწევს იმას, რომ ამ file input-ს გამჭვირვალეს ასვამს თავზე ჩვეულებრივ ღილაკს და input ველს (ანუ fileinput ზევიდანაა).

და მერე ჯავასკრიპტით იღებს ფაილის სახელს..

ერთი კი ვიფიქრე, ამხელა ამბები რად უნდა თქო.. იმიტომ რომ ერთი შეხედვით სამ ხაზში გამოდიოდა ყველანაირად მარტივი პასუხი:

<button type="submit" id="fake-btn" onclick="document.getElementById('real').click();"> ატვირთვა</button>
<input type="text" id="filename_in"/>
<input type="file" id="real" style="display:none" value="some" onchange="document.getElementById('filename_in').value = this.value;"/>

ანუ, ვმალავ ნამდვილ ამტვირთავ ინფუთს, მაქვს ჩემი ღილაკი და ტექსტური ინფუთი და როცა ვინმე დააჭერს ჩემს ღილაკზე, ვაჭერინებ დამალულზეც click() მეთოდით. ხოლო მერე რა value-საც მიიღებს დამალული ელემენტი , ის გამომაქვს ჩემს ტექსტურ ინფუთში (onchange ივენტის საშუალებით).

მაგრამ მერე გამოჩნდა რატომაც არ გამოდიოდა ესე მარტივად. მოზილას და ოპერას click() მეთოდი (რომლითაც პროგრამულად ვაკეთებთ ელემენტზე მაუსის დაჭერის შემცვლელ მოქმედებას) არ აქვთ file input-ისთვისთვის.. გამონაკლისია ეს. ალბათ უსაფრთხოების მხრივ, მაგრამ რა დიდი ზარალი ეგ არის, ერთი ფაილ დიალოგი გამოვიდეს და მორჩა.. მოკლედ არ ვიცი რატომ არ აქვთ 😀 მაგრამ ფაქტია.. და კიდევ არც onchange ივენთი არ ესმით მაგისთვის.

ჰაკებსაც არ ადგიათ კარგი დღე. თუ ვინმე გადაწყვეტთ ამ ფაილ ინფუთის გალამაზებას, ბევრი ბრაუზერის ხუშტურების გათვალისწინება მოგიწევთ 😀 მგონი ყველასი სათითაოდ 😀

ყოველი შემთხვევისთვის ერთ-ერთი გავრცელებული გზა ეს არის: Quirksmode.org

ისე კარგი ამბავიც არის – html5-ში multiple file ამტვირთავი იქნება ეს ელემენტი. ახლა ეს შესაძლებლობა არ აქვს და flash-ის uploader-ებს იყენებენ ხოლმე.

რომ დავფიქრდი, მგონი ყველაზე მეტი ამ ელემენტმა მაწვალა 😀 მე კიდევ jquery-ის ვაწვალებდი. აი მაგალითად აჯაქს რიქვესთით კი ვერ ატვირთავთ სურათს 😀 აუცილებლად უნდა გადავიდეს საბმიტის გვერდზე. jquery.post-ით ფორმის მონაცემებს რომ ვგზავნით, არ იგზავნება ეს. არც jQuery-ის serialize() ფუნქცია მოქმედებს მაგაზე, ფორმის სერიალიზებას როცა ვაკეთებთ..

გამოსავალი iframe ელემენტია ან ისევ flash uploader-ი.

და ბოლოს, რომ გამოვკეთდები ეს პოსტი რომ არ წავშალო, სიმღერასაც დავამატებ… : D i love it

გამოხმაურება

comments