Help us understand the problem. What is going on with this article?

input[type=file]をデザイン的になんとかする方法

More than 5 years have passed since last update.

ボタン画像をクリックしたときに、input[type=file]をクリックしたことにする(JS)

IE の場合は、実際に form 送信された内容の内、input type=file の内容が空なのだ。
http://qiita.com/Qiita/items/c686397e4a0f4f11683d

これにははまった・・・

ボタン画像とinput[type=file]を同じサイズで重ねて、input[type=file]上にして透明にする

IEでクリックするとinput[type=file]のファイルパスが書かれるところにカーソルが残って気持ち悪い・・・

input[type=file]でlabelを使う

IE8以下でlabel内に画像があった場合、その画像をクリックしても何も起こらないのでJSで対応。
このJSはIE9以上で走らせると、キャンセルや開くを押したあとにもう一度選択画面?が立ち上がる。

if ($.browser.msie && $.browser.version < 9) {
    $('label > img').click(function () {
        $('#'+$(this).parent().attr('for')).focus().click();
    });
}
ituki_b
Contribution2000目指し中。 何かを理解/ジェネレーションするための自分用ツールを作るのが大好きです。 例→https://qiita.com/ituki_b/items/62a752389385de7ba4a2
http://mania-ku.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away