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

7 thoughts on “File input ველი html-ში

  • 07 თებერვალი, 2010 at 00:47
    Permalink

    ბოლობოლო გააკეთე? 😀

    Reply
  • 07 თებერვალი, 2010 at 01:33
    Permalink

    @Jibla 😀
    არა, სტილს თავი დავანებე. დროებით დავტოვე როგორც არის. აი აჯაქს რიქვესთის გამო iframe-ში ჩავსვი და ეგრე კი მუშაობს გვერდის დაურეფრეშებლად )

    Reply
  • 18 აპრილი, 2010 at 22:08
    Permalink

    ორი დღე ვჩხუბობდით მაგ თემაზე მე და ჯიბლა 🙂 მინდოდა რომ ეგ ღილაკი გაესტილა და ვერ ვუშვებდი აზრს, რომ რაიმე საშუალება არ არის მაგისთვის, ჯიბლა კიდე გამწარებული მიმტკიცებდა რომ არ არის! 😀

    Reply
  • 10 მაისი, 2011 at 01:37
    Permalink

    მადლობ კაკრას ამას ვეძებდი.
    გაიხარე სამურაიიიიიიიიიიიიიიიიიიიიიიიი

    Reply
  • 03 ნოემბერი, 2013 at 02:44
    Permalink

    კარგი პოსტია ერთს ვიტყვი რომ ოპერაზეც მუშაობს და მოზილაზეც თუ

    ამას შევცვლით

    ამით.
    ანუ კიარ უნდა გააქრო უბრალოდ ოპოსიტი უნდა დააკლო

    Reply
    • 03 ნოემბერი, 2013 at 02:46
      Permalink

      აქ კომენტარში html კოდები არ გამოაქვს და მაშინ ასე გადავაკეთებ

      კარგი პოსტია ერთს ვიტყვი რომ ოპერაზეც მუშაობს და მოზილაზეც თუ
      display: none
      ამას შევცვლით
      opacity: 0
      ამით.
      ანუ კიარ უნდა გააქრო უბრალოდ ოპოსიტი უნდა დააკლო

      Reply
  • 02 დეკემბერი, 2013 at 15:01
    Permalink

    Dzalian sasargeblo postia, madloba avtors

    Reply

კომენტარის დატოვება

თქვენი ელფოსტის მისამართი გამოქვეყნებული არ იყო. აუცილებელი ველები მონიშნულია *